entrevista19022022

entrevista.js

import logo from "./logo.svg"
import "./App.css"
import { useState } from "react"

function App() {
  const [listContents, setListContents] = useState([{ name: "test" }])
  const [inputContent, setInputContent] = useState("")

  const handleAdd = () => {
    setListContents([...listContents, { name: inputContent, checked: false }])
  }
  const handleCheck = (e, i) => {
    const testList = [...listContents]
    testList[i].checked = !testList[i].checked
    setListContents(testList)
  }

  return (
    <div>
      <div className='input-container'>
        <input
          type='text'
          value={inputContent}
          onChange={(e) => setInputContent(e.target.value)}
        />
        <button onClick={() => handleAdd()}>add</button>
      </div>
      <div className='list-content-container'>
        {listContents.map((e, i) => {
          return (
            <div className='list-item'>
              <p>{e.name}</p>
              <input
                type='checkbox'
                checked={e.checked}
                onClick={(e) => handleCheck(e, i)}
              />
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default App