Как динамически изменить массив? React js

Question

У меня есть два компонента, в первом компоненте массив, который я хочу динамически изменить (например при нажатии на кнопку) и передать во второй компонент. Но я немного запутался. Буду благодарен за подсказку

Первый компонент с массивом

import React, {useState} from 'react';
import Context from './Context';
import Products from './Products';

function App() {
  let [arr, setArr] = React.useState([
    {id: 1, name: "Something1", price: 500,},
    {id: 2, name: "Something2", price: 1000,},
  ])


  return (
    <Context.Provider value={arr}>
      <div className="App">
        <Products />
      </div>
    </Context.Provider>
  );
}

export default App;

Второй компонент

import React, { useContext } from 'react';
import Context from './Context';

function Products() {
    const arr = useContext(Context);
    return(
        <div className="Products">
            {arr.map(item => {
                return(
                    <div key={item.id}>
                        <h1>{item.id}</h1>
                        <h2>{item.name}</h2>
                        <h3>{item.price}</h3>
                    </div>
                )
            })}
        </div>
    )
}

export default Products;

Answer 1

<div onClick={clickHandler}></div>
  const clickHandler = () => {
    let newArr = [...arr]
    newArr[0] = {...newArr[0],id:25}
    setArr(newArr)
  }

подробное объяснение моего ответа https://www.youtube.com/watch?v=Z7_7xvJ7Cjc

данные в Products сами обновятся после setState произойдет reRender компонента главное не забывать про иммутабельность (работать всегда с копией объекта не мутировать объект (не изменять на прямую))

не принимай ответ как правильный мне самому интересно может есть более лаконичная запись моего ответа но решение верное

БЛОГ НА HUSL

Как динамически изменить массив? React js

Ответы (1 шт):