Can you pass down state to child components with React Hooks?

Question

I'm trying to re-write some of my code in React Hooks, and I was wondering, when I pass down searchData in this example... Will the now have access to searchData and setSearchData? I'm confused about how passing around state in React Hooks works.

import React, { useState, useEffect } from "react";
import SearchBarContainer from "../SearchBar/SearchBarContainer";
import PostContainer from "./PostContainer";



function PostPage(props) {
   const [searchData, setSearchData] = useState([...props.data]);
   const [addLike, setAddLike] = useState([]);

 useEffect(() => {
 setAddLike({ addLike: Array(props.data.length).fill(false) });
  });

return (
  <div>
    <SearchBarContainer data={props.data} searchData={searchData} />

    <div css={parentPostContainer}>
      {searchData.map((dataOnMap, index) => {
        return (
          <PostContainer
            data={dataOnMap}
            addLike={addLike[index]}
            searchData={searchData}
          />
        );
      })}
     </div>
   </div>
 );
}

export default PostPage;

Answer 1

Yes, as far as passing down props are concerned there is no difference in usage with React Hooks. In the snippet you've provided just pass setSearchData as a prop to PostContainer.

<PostContainer
  data={dataOnMap}
  addLike={addLike[index]}
  searchData={searchData}
  setSearchData={setSearchData}
/>

Answer 2

Yes Absolutely you can. In fact React docs talk about "Lifting state up" so to speak.

If there is shared state between components and you need to lift it up to their nearest ancestor.

The general concept is props are passed down and state is passed up.

However, this can get messy. If you are working on a larger project, I would recommend using Redux.

You can pass the state as props, but if you want child components to alter state, then you can pass the setter from the useState directly to child components.

Here is the same example:

<PostContainer
   data={dataOnMap}
   addLike={addLike[index]}
   searchData={searchData}
   setSearchData={setSearchData}
   setAddLike={setAddLike}
/>

Or another solution

const LikeManager = {
  addLike: setAddLike,
  data: {
     //some data
  }  
}

<PostContainer
   data={dataOnMap}
   likeManager: {LikeManager}
/>

I know this is not part of the question, but I would recommend using scalar values for useState wherever possible