反应 js state 值始终为 false

Question

hello im trying to make a array that contain a objects and i want to map this array into two tables:thisis stricture of array:

0
: 
{title: 'uml', agreement: false}
1
: 
{title: 'react', agreement: false}
2
: 
{title: 'laravel', agreement: false}
length
: 
3
[[Prototype]]
: 
Array(0) 

and i have a checkbox that make agreement true or false. but the problem is everytime the agreement is false. i want to send objects to first table if is true and to seconde table if is false but everytime is send to first table with false agreement. this is all of code: some functions is just to show the values of states

import './App.css';
import { useRef, useState } from 'react';

function App() {

  const [modules,setModules]=useState([])
  const [agreement,setAgreement]=useState()
  const [title,setTitle]=useState()
  const checkbox=useRef()

  function handlecheck(){

    setAgreement(checkbox.current.checked)
    
  }
  function handlechange(event){
    setTitle(event.target.value)

  }
  function ajouter(){
    setModules([...modules,{title,agreement}])
    
  }
  function affich(){
    return console.log(modules)
  }


  return (
    <div className="App">
      <section class="container cd-table-container">
        <h2 class="cd-title">Insert Table Record:</h2>
        <input onChange={(event)=>handlechange(event)} type="text" class="cd-search table-filter" data-table="order-table" placeholder="module name" />
        <button className='ajouter' onClick={()=>ajouter()}  >Ajouter</button>
        <button className='ajouter' onClick={()=>affich()}  >affich</button>
        <input type={"checkbox"} ref={checkbox}   onChange={(event)=>handlecheck(event)} />
        <table class="cd-table table">
          <thead>
            <tr>
              <th>modules regionaux</th>
            </tr>
          </thead>

          <tbody>
            {
              modules.map((elm,index)=>{
                if(elm.agreement=true){
                  return (<tr>
                    <td>{elm.title}</td>
                  </tr>)
                }
              })
            }
          </tbody>
        </table>
        <br></br>
        <table class="cd-table table">
          <thead>
            <tr>
              <th>modules non regionaux</th>
            </tr>
          </thead>

          <tbody>
          {
              modules.map((elm,index)=>{
                if(elm.agreement=false){
                  return (<tr>
                    <td>{elm.title}</td>
                  </tr>)
                }
              })
            }
          </tbody>
        </table>
      </section>
    </div>
  );
}

export default App;

Answer 1

so first you don't have to use (useRef) hock just use (useState) will be better, second you were using the if statement with the assign operator sign you should use the double equal sign or the triple sign this the full code

 import './App.css'; import { useRef, useState } from 'react'; function App() { const [modules, setModules] = useState([]) const [agreement, setAgreement] = useState() const [title, setTitle] = useState() function handlecheck(e) { setAgreement(e) } function handlechange(event) { setTitle(event.target.value) } function ajouter() { setModules([...modules, { title, agreement }]) } function affich() { return console.log(modules) } return ( <div className="App"> <section class="container cd-table-container"> <h2 class="cd-title">Insert Table Record:</h2> <input onChange={(event) => handlechange(event)} type="text" class="cd-search table-filter" data.table="order-table" placeholder="module name" /> <button className='ajouter' onClick={() => ajouter()} >Ajouter</button> <button className='ajouter' onClick={() => affich()} >affich</button> <input type={"checkbox"} onChange={(event) => handlecheck(event.target.checked)} /> <table class="cd-table table"> <thead> <tr> <th>modules regionaux</th> </tr> </thead> <tbody> { modules.map((elm, index) => { if (elm.agreement === true) { return (<tr> <td>{elm.title}</td> </tr>) } }) } </tbody> </table> <br></br> <table class="cd-table table"> <thead> <tr> <th>modules non regionaux</th> </tr> </thead> <tbody> { modules.map((elm, index) => { if (elm.agreement === false) { return (<tr> <td>{elm.title}</td> </tr>) } }) } </tbody> </table> </section> </div> ); } export default App;