title: How to properly pass an array from a parent React class component state to a child component written with hooks?
body: <p>I'm trying to learn how to use react hooks properly. I have a parent component written with class and I'm trying to capture an array (rooms) in my new child component that is using hooks. Here is a simplified version of the code:</p>
  <p><strong>Parent component</strong></p>
  <pre><code>export default class ParentComponent extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        rooms: []
      };
    }
  
    componentDidMount() {
      RoomService.getAllRooms()
          .then((res) =&gt; {
            if (res.status === 200) {
              var roomsArray = [...res.data];
              this.setState({ rooms : roomsArray });
            }
          })
          .catch((err) =&gt; console.log(err))
    }
  
  render() {
  return (
    &lt;div&gt;
    &lt;ChildComponent {...this.state.rooms}/&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>}</p>
  <p><strong>An this is my child component</strong></p>
  <pre><code>function ChildComponent (props) {
    const [rooms, setRooms] = useState(props); 
  
    useEffect(() =&gt; {
      console.log('props received ' + JSON.stringify({rooms}));
    },[props]);
  
  ...
  </code></pre>
  <p>If I log my state inside the parent component I see the content of my array. But my child component is always displaying an array with no content.</p>
  <pre><code>props received {&quot;rooms&quot;:{}}
  </code></pre>
  <p>What am I doing wrong that I can't retrieve the content of my array inside the child component?</p>