allAboutKeys.jsx

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'rsuite'
import 'rsuite/dist/styles/rsuite-dark.css'
import { generate } from 'shortid'
import User from './User'
import Viewer from './Viewer'

const App = () => {
  const [users, setUsers] = useState([
    { name: 'rowadz', age: 23 },
    { name: 'sarah', age: 97 },
    { name: 'Eman', age: 29 },
    { name: 'Ropa', age: 14 },
    { name: 'Kowq', age: 49 },
  ])

  const mapState = () => {
    console.log('%cUpdated State', 'color: #FF0005; font-size: 40px')
    setUsers((prev) =>
      prev.map(({ name, age }) => ({ name: `@${name}`, age: age * 10 }))
    )
  }

  return (
    <div>
      <Button color="red" onClick={mapState}>
        💥 Update State 💥
      </Button>
      {users.map(({ name, age }, index) => (
        // <User key={generate()} name={name} age={age} />
        <User key={index} name={name} age={age} />
      ))}
      <Viewer />
    </div>
  )
}


import React, { memo, useState } from 'react'
import { Panel, Button, Input } from 'rsuite'

const buttonStyles = { margin: 10 }

const User = (props) => {
  const [age, setAge] = useState(props.age)
  const [name, setName] = useState(props.name)

  const plusOne = () => {
    setAge((prev) => prev + 1)
  }
  const minusOne = () => {
    setAge((prev) => prev - 1)
  }

  return (
    <Panel header={<Input value={name} />} bordered>
      <Button style={buttonStyles} color="violet" onClick={plusOne}>
        ➕1
      </Button>
      <Button color="violet" appearance="ghost">
        {age}
      </Button>
      <Button style={buttonStyles} color="violet" onClick={minusOne}>
        ➖1
      </Button>
    </Panel>
  )
}

export default memo(User)


import React, { useState } from 'react'
import { Button } from 'rsuite'
import FileViewer from './FileViewer'

const dataFromAPI = [
  {
    id: 1,
    type: 'File',
    content: 'hello world',
    checked: false,
    title: '🐼',
  },
  { id: 2, type: 'File', content: 'Second file', checked: true, title: '🐶' },
  { id: 3, type: 'File', content: 'Oooops', checked: false, title: '🦄' },
]

const Viewer = () => {
  const [selectedFile, setSelectedFile] = useState(null)

  return (
    <div style={{ margin: 90 }}>
      {dataFromAPI.map((file) => (
        <Button
          style={{ margin: 10 }}
          key={file.id}
          color="yellow"
          appearance="ghost"
          onClick={() => {
            setSelectedFile(file)
          }}
        >
          {file.title}
        </Button>
      ))}

      {!!selectedFile && (
        <FileViewer 
          key={selectedFile.id}
          content={selectedFile.content}
          checked={selectedFile.checked}
        />
      )}
    </div>
  )
}

export default Viewer



import React, { useState } from 'react'
import { Panel, Checkbox } from 'rsuite'

const FileViewer = ({ content, checked }) => {
  const [isChecked, setIsChecked] = useState(checked)

  const onChange = () => {
    setIsChecked((prev) => !prev)
  }

  return (
    <Panel header={content} bordered>
      <Checkbox checked={isChecked} onChange={onChange} />
    </Panel>
  )
}

export default FileViewer



ReactDOM.render(<App />, document.querySelector('#app'))