Change the value in massive by pressing button(React)-CodePudding

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

CodePudding user response：

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