Как перерендерить вложенный компонент, если вложенный компонент имеет свой стейт?

Question

Пример максимально упростил, натолкните хотя бы на мысль как менять стейт внутри Counter из Testing, хуки или map + Counter в отдельную функцию? Уже много перепробовал.

App.tsx:

import Testing from './Testing';
function App() {
  return (
    <Testing/>
  )
}

Testing.tsx

import Counter from './Counter';
const Testing = () => {
  const dataArr = [{...},{...},{...}]
  
  const [data, setData] = useState(dataArr);
    return (
        {data.map((item) => {
          return (
            <Counter //как перерендерить этот компонент?
              //пропсы
              value: number;
            />
        }
  )
}

Counter.tsx

const Counter = ({ value }) => {
  const [count, setCount] = useState(value);
  return (
      <div>
        <button onClick={decrement}>[  -  ]</button>
        <h6 >{count}</h6>
        <button onClick={increment}>[  +  ]</button>
      </div>
  );
}

Answer 1

Помог хук useEffect и такая функция в компоненте Counter

function reset(){
 setCount (count => count = value)
}

useEffect(()=> reset(),[value])

БЛОГ НА HUSL

Как перерендерить вложенный компонент, если вложенный компонент имеет свой стейт?

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