Change the value in massive by pressing button(React)

April 16, 2022

Ok, so I am creating employers list with salary and Names. I want to change color of text by changing value of variable – "increase" from false to true for example. I already created code to change text taking value FROM variable

<li className={ increase ? "list-group-item d-flex justify-content-between increase" : "list-group-item d-flex justify-content-between"}>

Now I need to change value of "increase" by clicking a button <i className="fas fa-cookie"></i>

Here is a full code:

const EmployeesListItem = ({name, salary, increase}) => {
    return (
//-------Here I check the value of variable----->
        <li className={ increase ? "list-group-item d-flex justify-content-between increase" : "list-group-item d-flex justify-content-between"}>
            <span className="list-group-item-label">{name}</span> 
            <input type="text" className="list-group-item-input" defaultValue={salary + "$"}/>
            <div className='d-flex justify-content-center align-items-center'>
                <button type="button"
                    className="btn-cookie btn-sm ">
                    <i className="fas fa-cookie"></i> //by clicking in this button I wanna change value of increase variable
                </button>

                <button type="button"
                        className="btn-trash btn-sm ">
                    <i className="fas fa-trash"></i>
                </button>
                <i className="fas fa-star"></i>
            </div>
        </li>
    )
}

export default EmployeesListItem;

Here is EmployerList structure:

import EmployeesListItem from '../employeers-list-item/employeers-list-item'
import './employers-list.css'
const EmployersList = ({data}) => {

    const elements = data.map(item => {
        return(
             <EmployeesListItem {...item} data={data}/> //name={item.name}  salary={item.salary}
        )
    })


    return (
        <ul className='app-list list-group'>
            {elements}
        </ul>
    )
}

export default EmployersList;

And here is App component:

function App() {

    const data = [
        {name: 'killer228brawlstarsassasin1993', salary:2300 ,increase: true},
        {name: 'jotaro', salary:800 ,increase: false},
        {name: 'Ktoh', salary:300 ,increase: true}
    ]

    return (
        <div className="app">
            <AppInfo/>
            <div className="search-panel">
                <SearchPanel>
                </SearchPanel>
                <AppFilter/>
            </div>
            <EmployersList data={data}/>
            <EmployeesAddForm/>
        </div>
    )
}

export default App;

the program works, but still don’t know how to change the value of the INCREASE variable in the APP component by clicking on the button

>Solution :

You should read about React Context, this will help you to store data so it is accessible from every component: https://reactjs.org/docs/context.html

The way your app works now you need to pass a "changeIncrease"-function as prop to the EmployeesListItem component.

const changeIncrease = (name) => {
  data.forEach(employee, index) => {
  if(employee.name == name) {
    data[index] = {...emloyee, increase: !employee.increase}
  }
}
}

Maybe there’s a more elegant solution out there, but this should do it