state

import React from 'react';
import Header from './Header';
import Order from './Order';
import Inventory from './Inventory';
 
class App extends React.Component {
 
    constructor() {
        super();
        this.state = {
 
        }
 
    }
 
    render() {
        return (
            <div className="catch-of-the-day">
                <div className="menu">
                    <Header tagline="Jim is cool" />
                </div>
                <Order />
                <Inventory />
            </div>
        )
    }
 
}
 
export default App;

- app.js

import React from 'react';
import Header from './Header';
import Order from './Order';
import Inventory from './Inventory';
 
class App extends React.Component {
 
    state = {
 
    }
 
    render() {
        return (
            <div className="catch-of-the-day">
                <div className="menu">
                    <Header tagline="Jim is cool" />
                </div>
                <Order />
                <Inventory />
            </div>
        )
    }
 
}
 
export default App;

- or you can set it as a property

import React from 'react';
import Header from './Header';
import Order from './Order';
import Inventory from './Inventory';
 
class App extends React.Component {
 
    state = {
        fishes: {},
        order: {}
    };
    addFish = fish => {
        // 1. Take a copy of the existing state
        const fishes = { ...this.state.fishes };
        // 2. Add our new fish to that fishes variable
        fishes[`fish${Date.now()}`] = fish;
        // 3. Set the new fishes object to state
        this.setState({ fishes });
    };
 
    render() {
        return (
            <div className="catch-of-the-day">
                <div className="menu">
                    <Header tagline="Jim is cool" />
                </div>
                <Order />
                <Inventory addFish={this.addFish} />
            </div>
        )
    }
 
}
 
export default App;

  <ul className="fishes">
      { Object.keys( this.state.fishes ).map( key => <Fish key={key} /> ) }
  </ul>

<ul className="fishes">
    {
        Object.keys( this.state.fishes ).map(
            key => <Fish
            key={key}
            details={this.state.fishes[key]}
            />
        )
    }
</ul>

- file 1

import React from 'react';
import { formatPrice } from "../helpers";
 
class Fish extends React.Component {
  render() {
    const { image, name, price, desc, status } = this.props.details;
    const isAvailable = status === "available";
    return (
      <li className="menu-fish">
        <img src={image} alt={name} />
        <h3 className="fish-name">
          {name}
          <span className="price">{formatPrice(price)}</span>
        </h3>
        <p>{desc}</p>
        <button
          disabled={!isAvailable}
          onClick={() => this.props.addToOrder(this.props.index)}
        >
          {isAvailable ? "Add To Order" : "Sold Out!"}
        </button>
      </li>
    );
  }
}
 
export default Fish;

- file 2