React parent couldn't update a child component in a mapped JSX list

Question

NOTE: You can view and edit the code in CodeSandbox.

I have the following parent file which creates a useState list of child component called ProgressBar:

import React, { useState } from 'react';
import ProgressBar from './ProgressBar';
import './App.css';

var idCounter = 0;

export default function App() {
  const [barsArray, setBarsArray] = useState([]);
  const [input, setInput] = useState('');

  function add() {
    setBarsArray((prev) => [
      ...prev,
      ,
    ]);
  }

  function remove() {
    setBarsArray((prev) => prev.filter((bar) => bar.key !== input));
  }

  function reset() {
    setBarsArray((prev) =>
      prev.map((bar) => (bar.key === input ? { ...bar, restart: true } : bar))
    );
  }

  return (
    
      
        
        
        
         setInput(e.target.value)}
        />
      
      
        {barsArray.map((bar) => (
          
            {bar}
            {bar.key}
          
        ))}
      
    
  );
}

The file of the child ProgressBar has the following content:

import React, { useEffect, useState } from 'react';
import './ProgressBar.css';

export default function ProgressBar(props) {
  const [progress, setProgress] = useState(0);

  let interval;

  useEffect(() => {
    interval = setInterval(() => {
      setProgress((prev) => prev + 1);
    }, RnadInt(10, 120));
  }, []);

  useEffect(() => {
    if (progress >= 100) clearInterval(interval);
  }, [progress]);

  if (props.restart === true) {
    setProgress(0);
  }
  return (
    <>
      
        
      
    
  );
}

function RnadInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

My problem is that the reset button in the parent doesn't work, as far as I'm concerned, if you change the passed props to the child, the child automatically re-renders, but even though I'm updating the props in reset function in the parent, which maps the old array of child components to a new array and only changes the props of the selected child.

Thanks!

user_1672994 · Answer

Adding the element in state via add would require to keep the ref of element instead of actual prop bind to element. Suggestion here to use the model object and while rendering use the JSX element.

Please use the below code which defines the barsArray as object state and later uses it render ProgressBar component (from map call).

Check the working codesandbox - https://codesandbox.io/s/admiring-glitter-j3b7sw?file=/src/App.js:0-1446

import React, { useState } from "react";
import ProgressBar from "./ProgressBar";
import "./App.css";

var idCounter = 0;

export default function App() {
  const [barsArray, setBarsArray] = useState([]);
  const [input, setInput] = useState("");

  function add() {
    setBarsArray((prev) => [...prev, { id: idCounter++, restart: false }]);
  }

  function remove() {
    setBarsArray((prev) =>
      prev.filter((bar) => bar.id.toString() !== input.toString())
    );
  }

  function reset() {
    setBarsArray((prev) =>
      prev.map((bar) => {
        return bar.id.toString() === input.toString()
          ? { ...bar, restart: true }
          : { ...bar };
      })
    );
  }

  return (
    
      
        
        
        
         setInput(e.target.value)}
        />
      
      
        {barsArray.map((bar) => (
          
            
            {bar.key}
          
        ))}
      
    
  );
}

user_17388027 · Answer

This simple fix worked for me, in the file of the child, call the conditional expression in a useEffect hook. Currently, it doesn't listen to the changes in props.restart and only runs on the initial render.

check https://reactjs.org/docs/hooks-reference.html#useeffect

 useEffect(() => {
    if (props.restart === true) {
      setProgress(0);
    }
  }, [props.restart])

link to working codesandbox https://codesandbox.io/s/distracted-gauss-24d0pu

React parent couldn't update a child component in a mapped JSX list

2 Answers