Introduction to Lenses in Ramda

<!DOCTYPE html>
<html>

  <head>
    <script data-require="ramda@*" data-semver="0.22.1" src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="output"></div>
    <script src="script.js"></script>
  </body>

</html>

// We don't need require in plunker
//const R = require('ramda')

const person = {
  firstName: 'Fred',
  lastName: 'Flintstone'
}

// const fLens = R.lens(R.prop('firstName'), R.assoc('firstName'))
const fLens = R.lensProp('firstName')

// const result = R.view(fLens, person)
// const result = R.set(fLens, 'Wilma', person)

// const firstName = R.view(fLens, person)
// const upperName = R.toUpper(firstName)
// const result = R.set(fLens, upperName, person)

const result = R.over(fLens, R.toUpper, person)

console.log(result)
document.getElementById('output').innerHTML = `${JSON.stringify(result)}`

/* Styles go here */