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 >
        <h2 >Insert Table Record:</h2>
        <input onChange={(event)=>handlechange(event)} type="text"  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 >
          <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 >
          <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;

CodePudding user response：

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 >
        <h2 >Insert Table Record:</h2>
        <input onChange={(event) => handlechange(event)} type="text"  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 >
          <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 >
          <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;