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>
Source: stackoverflow.com
Related Query
- how to display a fetch result in a react app
- how to fetch and display images from database in react app
- How to fetch image names from database and display them in react app
- How to know if react-router can go back to display back button in react app
- How to display Emoji in React App
- How to Fetch and Display an Image from an express backend server to a React js frontend?
- How to fetch and display data from json file in react typscript
- How to fetch and display data from Express API to a React app?
- How display data from firestore in a react web app
- How to fetch data from a custom React hook (API) with onClick and display it in a Div using TypeScript?
- How to fetch data in React blog app and stay DRY?
- How to display React app in full page always?
- How to access cookie in server-side data fetch for isomorphic React app
- How can I display the result of a promise on a webpage in a react export
- How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?
- How do you do an inline styling in React to display an unordered list as a result of using the map() method?
- React App: How to display data from api using fetch
- How to fetch and represent data produced by python in react web app
- How to set .htaccess in React app (create-react-app) to display images
- How to fetch data from server using JavaScript? (adding backend to React app for the first time)
- How to display a spinner when data is loading from server by fetch api in REACT JS?
- How to connect flask rest API output to react and display result
- How does one count duplicates within an array of data-items and also does display this result via a react view?
- How to fetch data into highchart in react app
- How can i add data in Realtime and display in my React app
- Not sure how to display backend data in react app
- How to fetch and display data from documents in subcollection in react
- How to submit a form and pop up a modal to display the result in React
- How to display and animate React Component depending to result of condition with React Spring?
- How to GET data from mongoDB ATLAS and display in React App
More Query from same tag
- Place Switch/check box along with tittle of the Ant Design table reatc js
- Browser not displaying MP4 @webpack-dev-server @React.js @JS
- Having issues making requests to an API using AJAX
- How to navigate between pages using Electron and React?
- Problem with using useRef current in useEffect
- Avoid Refreshing function inside a component during state update
- I will retrieve the information that is in object To perform in FormItem antd how to
- How do I implement a function prop for the React-Selectize library in Typescript?
- using useRef with older version react component?
- How to make react available on whole app without importing it again and again in every jsx file
- TypeError: Cannot read property 'map' of undefined state object inside array?
- Accessing redux state in ComponentDidMount
- React lifecycle
- Fetching data from firestore collection in react js
- Running event handler once
- Firebase auth custom claims causes issues with loader
- Private Route with Redux
- The component is not re-rendered after linking on react-router
- React get previous state
- Loader isn't spinning when it's inside flex container
- React’s new context api with enzyme
- Why are objects not valid as a React child?
- Too much child component props, should i pass them using a dedicated class?
- useState not reflecting changes
- How can I get React.js TypeScript to accept 'parentElement' on 'event.target' with a onKeyDown event?
- Automatic popup with Auth0-react instead of login button
- How to retrieve the key into a Semantic-ui-react dropdown?
- ReactJS: Have one className with binding and another className without
- Can not read history in class component
- Deleting items from an array React (infinite re-render loop error)