score:0

you should pass data to banner and with useeffect and usestate get and update the data when it changes

const { useeffect, usestate } = react;

function banner(props) {
  const [message, setmessage] = usestate('');
  useeffect(() => {
    setmessage(props.message);
  }, [props]);
  if (!props.warn) {
    return null;
  }

  return <div classname="message">{json.stringify(message)}</div>;
}
class page extends react.component {
  constructor(props) {
    super(props);
    this.state = {
      showmessage: false,
      message: 'foo',
    };
    this.handletoggleclick = this.handletoggleclick.bind(this);
  }

  handletoggleclick() {
    this.setstate((state) => ({
      showmessage: !state.showmessage,
    }));
  }

  componentdidmount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((json) => {
        this.setstate({
          message: json,
          dataisloaded: true,
        });
      });
  }

  render() {
    return (
      <div class="app">
        <banner message={this.state.message} warn={this.state.showmessage} />
        <button onclick={this.handletoggleclick}>
          {' '}
          {this.state.showmessage ? 'hide' : 'show'}
        </button>
      </div>
    );
  }
}

function app() {
  return (
    <div classname="app">
      <page />
    </div>
  );
}

reactdom.render(<app />, document.getelementbyid('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>


Related Query

More Query from same tag