Question 179351 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to update state for previous React component which rendered from array

I am adding a React component in Array with (add component) button click and rendering that array. Each component is rendering a count hook by giving it as a prop.

Here’s the problem comes, once component is added in array and rendered. Even if I increment the count with button, count hook is also updating, but component rendering from array is not updating. When I click on (add component) button again then that new component will render with updated hook. But previous components are not updating with increment.

App.js

import React, { useState } from 'react';
import Component from './Components/Component';

function App() {
  const [comp, setComp] = useState([]);
  const [count, setCount] = useState(0);

  const addComp = ()=>{
    setComp(prevState=>{
      return([...prevState,<Component key={comp.length} count={count}></Component>])
    })
  }

  const increment = ()=>{
    setCount(prevState=>prevState+1)
  }

  return (
    <>
      <button onClick={addComp}>Add Component</button>
      <button onClick={increment}>Increment</button>
      {comp}
    </>
  )
}

# export default App;

Component.jsx

import React from 'react'

export default function Component(props) {
  return (
    <div>{props.count}</div>
  )
}
Tags:

2

Answers


  1. 0

    It is not ideal to store components in a state the way you did. Ideally, we would just store the information(props) in the state and that should work.

    Example:
    In your case, we can do it this way

      const [comp, setComp] = useState(0);
  const [count, setCount] = useState(0);

  const addComp = ()=>{
    setComp(prevState=> prevState+1)
  }

  const increment = ()=>{
    setCount(prevState=>prevState+1)
  }

  return (
    <>
      <button onClick={addComp}>Add Component</button>
      <button onClick={increment}>Increment</button>
      {Array.from({length: comp}).map((_, i) => (
        <Component key={i} count={count}></Component>
      )}
    </>
  )
    Login or Signup to reply.
  2. 0

    the useState() hook actually is recommending to store primitive types or simple objects. It is a cool idea to store components in it but performance-wise it is really a heavy lift on react side.

    better solution is to use primitive type values and just pass the values to a map when rendering. Here is a good example:

    import React, { useState } from 'react';
import Component from './Components/Component';

function App() {
  const [comp, setComp] = useState([]);
  const [count, setCount] = useState(0);

  const addComp = () => {
    setComp(prevState=>[...prevState, count])
  }

  const increment = () => {
    setCount(prevState=>prevState+1)
  }

  return (
    <>
      <button onClick={addComp}>Add Component</button>
      <button onClick={increment}>Increment</button>
      {comp.map((c,index) => <Component key={index} count={c}></Component>)}
    </>
  )
}

# export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search