Fake data in react state, props swiping?

Question

React

Hello, I started creating components, threw an array of objects into the state, so that I can use it later.
It looks something like this:
type State = {|
open: boolean,
|};

class Navbar extends React.Component<Props, State> {
  state = {
    open: false,
    trips: [
      {
        flights: [
          [{ id: 753 }, { status: "closed" }, { created: 153131255800 }],
          [{ id: 1232 }, { status: "opened" }, { created: 153131325800 }],
          [{ id: 4532 }, { status: "opened" }, { created: 153231324800 }],
        ],
      },
      {
        passengers: [
          { id: 115754321 },
          { category: "adult" },
          { firstname: "test" },
          { lastname: "test" },
        ],
      },
    ],
  };

  handleToggle = () => {
    this.setState(state => ({ open: !state.open }));
  };

  handleClose = () => {
    this.setState({
      open: false,
    });
  };

  render() {
    const { open, trips } = this.state;
    return (
      <div>
        <button onClick={this.handleToggle}>Click</button>
        {open && (
          <ClickOutside onClickOutside={this.handleClose}>
            <Menu trips={trips} />
          </ClickOutside>
        )}
      </div>
    );
  }
}

export default Navigation;

The question is, how best to do the layout of the array, so that it is convenient to pass it to props and then use it?

Answer 1

what is array folding? if you don’t want to propdrill, then use redux and use your current state in it as initialState

Answer 2

I didn’t understand what it means to make an array layout, but you pass the state to the child component and work with props in the child. For example, you can process an array through this.props.propName.trips.map...