ReactJS functional component variable passing

February 2, 2022

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>
    )
}

>Solution :

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