ReactJS functional component variable passing

Question

I am inputting car brands into an input box, which then are saved below the textbox in a list by pressing the "Save" button. My other component "Info" should set a text div to display a string when there is over 5 items in the list.

I am doing this without classes and need to use the Info component to do the actual rendering of the string "There's at least 5 car brands". The amount of items in the list needs to be passed from the Cars function as props to the Info component.

The adding is working, but when I am trying to return the count variable as props to the getCount component with , it crashes due to too many re-renders and I have been unable to get this working.

const Cars = () => {
const [car, setCar] = useState('');
const [list, setList] = useState([]);

const handleClick=(e)=>{
    e.preventDefault();
    setList((ls)=>[...ls, car])
    setCar("");
} 

const getCount = () => { //This only feature is to return the size of the list
    let count = 0;
    count = list.length;
    return count;
}

    return (
        <div>
            <Info data={getCount()}/>    //This is crashing the app from too many re-renders
            <h1>Enter a car brand!</h1>
            <input type="text" value={car} onChange={(e)=>setCar(e.target.value)}/>
            <button type="button" onClick={handleClick}>Save</button>
            <ul>
                {
                    list.map((car, i) => (
                          <li key = {i}>{car}</li>
                    ))
                }
            </ul>
        </div>
    )
}
 
                           //This components itself works, tried testing with an actual
const Info = (props) => {  //number input and it works. But with getCount input it crashes
    const [text, setText] = useState('');

    if(props.data > 2) {
        setText("There's at least 5 car brands");
    }

    return (
        <div>
            <h2>{text}</h2>
        </div>
    )
}

CertainPerformance · Accepted Answer · 2022-02-02 16:43:51Z

2

If you call a state setter on render, that'll cause a re-render.

If your app's state is such that the condition that results in the state setter being called is true, you'll get infinite re-renders.

In this case, there's no need for state in the Info - just use a plain variable that alternates between the empty string and the "There's at least 5 car brands" string.

const Info = ({ data }) => {
    const text = data > 2 ? 'There's at least 5 car brands' : '';
    return (
        <div>
            <h2>{text}</h2>
        </div>
    );
};

Also

<Info data={getCount()}/>

simplifies to

<Info data={list.length} />

or you might rename the prop to listLength. (Precise variable names make code more readable and can reduce bugs)

answered Feb 2, 2022 at 16:43

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aker Over a year ago

Thanks for the reply and and your comment, this helps a lot!

Khandker Ashik Mahmud · Accepted Answer · 2022-02-02 16:52:46Z

When list is change then only get count show

 const Cars = () => { 
const [car, setCar] = useState('');
const [list, setList] = useState([]);

const handleClick=(e)=>{
 e.preventDefault();
 setList((ls)=>[...ls, car])
 setCar("");
} 

useEffect(()=>{
 getCount()
},[list])

const getCount = () => { //This only feature is to return the size of the list
 let count = 0;
 count = list.length;
 return count;
 }

return (
    <div>
        <Info data={() => getCount()}/>    //You can change here  
        <h1>Enter a car brand!</h1>
        <input type="text" value={car} onChange={(e)=>setCar(e.target.value)}/>
        <button type="button" onClick={handleClick}>Save</button>
        <ul>
            {
                list.map((car, i) => (
                      <li key = {i}>{car}</li>
                ))
            }
        </ul>
    </div>
   )
  }

Or You will do this

 const Cars = () => { 
const [car, setCar] = useState('');
const [list, setList] = useState([]);
const [listCount, setlistCount] = useState(0);

const handleClick=(e)=>{
 e.preventDefault();
 setList((ls)=>[...ls, car])
 setCar("");
} 

useEffect(()=>{
 getCount()
},[list])

const getCount = () => { //This only feature is to return the size of the list
 setlistCount(list.length)
 }

return (
    <div>
        <Info data={listCount}/>    //You can change here  
        <h1>Enter a car brand!</h1>
        <input type="text" value={car} onChange={(e)=>setCar(e.target.value)}/>
        <button type="button" onClick={handleClick}>Save</button>
        <ul>
            {
                list.map((car, i) => (
                      <li key = {i}>{car}</li>
                ))
            }
        </ul>
    </div>
 )
}

Or You will do this

 const Cars = () => { 
const [car, setCar] = useState('');
const [list, setList] = useState([]);

const handleClick=(e)=>{
 e.preventDefault();
 setList((ls)=>[...ls, car])
 setCar("");
} 


return (
    <div>
        <Info data={list.length}/>    //You can change here  
        <h1>Enter a car brand!</h1>
        <input type="text" value={car} onChange={(e)=>setCar(e.target.value)}/>
        <button type="button" onClick={handleClick}>Save</button>
        <ul>
            {
                list.map((car, i) => (
                      <li key = {i}>{car}</li>
                ))
            }
        </ul>
    </div>
 )
}

Collectives™ on Stack Overflow

ReactJS functional component variable passing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related