Can I Set Initial State with Props in React + Redux?

Question

I'm having an issue where a state I have is showing as undefined and I suspect it might be because I'm passing the intial state as props.

Here's what the useState statement looks like:

const [filteredData, setData] = useState(props.cardsToShow);

I have cardsToShow as a state defined within MapStateToProps like this

cardsToShow: searchCards(state)

and it is populating based on the following search statement i have. note that baseball is the initial data load and search is a search query in store.

const searchCards = ({ baseball, search }) => {
  return search
    ? baseball.filter(a =>
        a.title[0].toLowerCase().includes(search.toLowerCase())
      )
    : baseball;
};

If i console log props.cardsToShow i get data which is an object of arrays.

If i console log filteredData i get an empty object.

Any ideas?

Answer 1

If i understood it well, you are facing the problem covered below.

According to this article:

https://learnwithparam.com/blog/how-to-pass-props-to-state-properly-in-react-hooks/

useState doesn't initialize on props change, so you should set the state on useEffect instead

useEffect(() => {
    setData(props.cardsToShow);
}, [props]);