A parent is conditionally rendering a component with unique props. The ternary inside the render function of the child receiving those props is not working as expected. 

I have used componentWillRecieveProps to setState and try to let the ternary be based on the state instead. And, after researching, I changed my code to use the function getDerivedStateFromProps (as componentWillRecieveProps is considered unsafe?) The code follows.

Additionally, I know that the component received props correctly and that state is updating to the correct value (due to a console.logs);

```js
    class AppearTyping extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            underscore: '',
            header: true
        }
    }

    .
    .
    .

    static getDerivedStateFromProps(props, currentState) {
        if (currentState.header !== props.header) {
            return {
                header: props.header,
            }
        }
        return null
    }

    render() {
        let display = this.props.paragraph.join('');
        console.log(this.state.header);
        return (
            <div>
                {this.state.header ? <h2 className="about white">{display} 
    {this.state.underscore}</h2> : <p className="about white">{display}</p>}
            </div>
        )
    }
    }    

```

If the component receives the `prop: header = true`, I want the `{display}` and `{this.state.underscore}` to be wrapped in `h2` tags. Otherwise, I want the component to be wrapped in `p` tags.