react js state value always false - reactjs

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;