Passing props and state to child component

Question

I am trying to break out components in my app but am running into some trouble understanding how to pass state and props from my parent component to the child components. For context my child component is a table that is rendering a smaller component in the rows.

Right now I have a const called BookComponents that takes a Book and writes to state. Where I am stuck is passing state and props into my BookTable component so that I can render books in the book table and not in the main page Thanks for your help and tips in advance.

MainPage:

import React from 'react';
import type { User, BookType } from '/types';
import Book from './Book';
import BookTable from './BookTable';

type Props = {};

type State = {
  selectedUser: <User> | null,
  books: BookType[]
};

export default class BookPage extends React.PureComponent<Props, State> {
  const BookComponents = this.state.book.map((book) => <Book {...book} />);
  const selectedUser = this.state.selectedUser;

  return (
  <div>

    <div>
      Find Users and their Books
      <Selector
        input={{
          onChange: this.onSelect,
          value: selectedUser,
        }}
        getValue={(user) => user.full_name}
      />

      {selectedUser && (
      <Section>
        <H1>
          {selectedUser.full_name}'s Books
        </H1>
        {BookComponents}
        <BookTable/>
      </Section>)}
    </div>
  </div>
  )
}

BookTable code:

import React from 'react';
import type { User } from '/types';

type Props = {};

type State = {};

export default class BookTable extends React.PureComponent<Props, State> {
  render() {
  return (
    <Section>
      <H1>
        Print User's books here
      </H1>
    </Section>
  );
 }
}

I have an answer to a similar question, How to set one component's state from another component in React, hope this helps! — HoldOffHunger

Kerem atam Kerem atam · Accepted Answer · 2020-06-18T19:02:53

If i understand you correctly, you just wanna pass state to props of component, nothing else?

In render of MainPage:

<BookTable books={this.state.book} />

In BookTable :

type Props = {
  books: BookType[]
};

export default class BookTable extends React.PureComponent<Props, State> {

  static defaultProps = {
    books: []
  }

  render() {
  return (
    <Section>
      <H1>
        {this.props.books.map((book) => <Book {...book} />)}
      </H1>
    </Section>
  );
 }
}

Passing props and state to child component

2 Answers