Возможно ли поменять состояние одного компонента, для изменения другого?

Question

[formasters777]

В React состояние у каждого компонента своё,
да можно пробросить пропсы, или сделать его глобальным,
но если у меня есть context global массив с объектами, и я меняю в одном его объекте ключ-значение text: true на false,
могу ли я привязать это true или false к другому setState'у в компоненте,
Например,

// context global
const [arr, setArr] = useState([
{text: true, img: link, itemId: 23},
{text: false, img: link, itemId: 21},
{text: true, img: link, itemId: 25}
])

const [btext, setBtext] = useState(true);

const handleChangeText = () => {
    arr.map((item) => {
       if (item.text === true) {
            setBtext(false );
}
})
}

return (
<button onClick={handleChangeText}>{btext}</button>
)

Когда кликаю по кнопке в этом компоненте всё меняется,
но если я меняю item.text в массиве arr из другого компонента, то в другом компоненте он стоит такой же,
setBtext меняет вроде значение, но новый текст не рендерится и не меняется его значение.
Это связано с тем, что там стоит event onClick, и нужно что-то вроде onChange? дополнительно ставить?

Comments

[alexeyburtasov]

Во первых в примере по клику меняется состояние btext, а единый источник данных, согласно философии реакта - arr. Необходимо менять состояние самого arr.
Во вторых, чтобы первый компонент кнопки менялся по событию на втором компоненте кнопки (или любом другом) нужно в первом компоненте правильно указать useEffect, в котором будет меняться состояние btext при изменении arr

[formasters777]

в этом случае перебрал свой context, и уже в нём стал менять что мне нужно,
с useEffect можно добиться нужного результата также в этом случае,
но в нём нужно делать поиск элемента, поменялось ли то значение, что нужно,
возможно нужно использовать memo также,
ловить события, которые не нужно контролировать, проверять.

Answer 1

[AmalDoskhoev]

Как сказал человек выше, для начала вам нужно изменить значение самого setArr во втором компоненте, а в первом компоненте установить useEffect на отслеживание arr, и как вы и сказали, уже внутри useEffect перебором массива, по определенному идентификатору искать именно тот объект, который вам нужен и уже делать там то, что вам нужно:

useEffect(()=>{
    if (arr.length > 0) {
      arr.forEach(element => {
        if (element.itemId === 23 && element.text === true) {
          setBtext(false);
        }
      });
    }
  },[arr])

И использование memo в вашем случае избыточно)