I am fooling around while learning React and I would like to know what would be an elegant solution for the scenario presented below.

Follow this [Link](https://codesandbox.io/embed/react-exercise-8ttef?fontsize=14&hidenavigation=1&theme=dark) to see the complete code set.

I have a `child` component, that has a `<h1>` `tag`. This tag returns a message that I am displaying dynamically as will be shown below.

**App root container**

I have my `state` on this `container`, and I want to keep it just there.

**State:**

The object of discussion here is the `cockpitAlert` `object`.

```
 state = {
        state = {
    persons: [
      { id: "a", name: "foo1" },
      { id: "b", name: "foo2" },
      { id: "c", name: "foo3" }
    ],
    CockpitAlert: {
      regular: "Some message",
      alert1: "The array is ending",
      alert2: "There is nothing to show"
    }
  };

```

**Below is how I delete the rendered items - still on App.js**

```
personDeleteHandler = index => {
    const person = [...this.state.persons];
    person.splice(index, 1);
    this.setState({ persons: person });
  };

```

**Below is where I render my `JSX`**

```
render() {
    return (
      <div className="App">
        <Cockpit
          regular={this.state.CockpitAlert.regular}
          alert1={this.state.CockpitAlert.alert1}
          alert2={this.state.CockpitAlert.alert2}
          personsLength={this.state.persons.length}
        />
        <Person click={this.personDeleteHandler} persons={this.state.persons} />
      </div>
    );
  }

```

**Cockpit child**

Below is the logic. `let message` dynamically changes the `props` according to the length of the `persons` `array`, that gets shortened upon clicks. 

```
import React from "react";

function Cockpit(props) {
  let message = props.regular;
  if (props.personsLength <= 2) {
    message = props.alert1;
  }
  if (props.personsLength === 0) {
    message = props.alert2;
  }

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default Cockpit;

```

As you can see this does not look very nice at all. 

I don't want to have all of these different `props` being pointed on my logic:

```
regular={this.state.CockpitAlert.regular}
alert1={this.state.CockpitAlert.alert1}
alert2={this.state.CockpitAlert.alert2}
personsLength={this.state.persons.length}

```

I wonder if there is a way that I could pass just one `props`, e.g `props.message` and change it dynamically, probably through `setState()` on the `root` level, where the `state` is set without having to move my logic from `Cockpit` to `App.js`