score:2
Accepted answer
in this example, there are 3 components detail, post, xyz
and a parent component app
. on the basis of state
value in parent, rendering
the different component. in all the 3 component passing a function
that is used to change the currentpage
state value in parent component.
for stateless functional component
, check the doc.
check this example:
var post = (props) => {
return <div onclick={()=>props.changecomponent('detail')}> post </div>
}
var detail = (props) => {
return <div onclick={()=>props.changecomponent('xyz')}> detail </div>
}
var xyz = (props) => {
return <div onclick={()=>props.changecomponent('post')}> xyz </div>
}
class app extends react.component{
constructor(){
super();
this.state = {currentpage: 'post'}
this.changecomponent = this.changecomponent.bind(this)
}
changecomponent(currentpage){
this.setstate({currentpage});
}
rendertab(){
switch(this.state.currentpage){
case 'post': return <post changecomponent={this.changecomponent}/>
case 'detail': return <detail changecomponent={this.changecomponent}/>
case 'xyz': return <xyz changecomponent={this.changecomponent}/>
}
}
render(){
return(
<div>
{this.rendertab()}
<div style={{margintop: 100}}>*click on page name to render different page</div>
</div>
)
}
}
reactdom.render(
<app/>,
document.getelementbyid('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'>
update (op asked for same example in es5
)
same example written in es5
(don't know much about es5
, correct me if i did some mistake):
function post(props) {
return <div onclick={()=>props.changecomponent('detail')}> post </div>
}
function detail(props){
return <div onclick={()=>props.changecomponent('xyz')}> detail </div>
}
function xyz(props){
return <div onclick={()=>props.changecomponent('post')}> xyz </div>
}
var app = react.createclass({
getinitialstate: function(){
return (
{currentpage: 'post'}
)
},
changecomponent: function(currentpage){
this.setstate({currentpage});
},
rendertab: function(){
switch(this.state.currentpage){
case 'post': return <post changecomponent={this.changecomponent}/>
case 'detail': return <detail changecomponent={this.changecomponent}/>
case 'xyz': return <xyz changecomponent={this.changecomponent}/>
}
},
render: function(){
return(
<div>
{this.rendertab()}
<div style={{margintop: 100}}>*click on page name to render different page</div>
</div>
)
}
})
reactdom.render(
<app/>,
document.getelementbyid('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'>
Source: stackoverflow.com
Related Query
- React JS pass state altering function to child
- how to set react parent component state by a async function and then pass this state to child as props?
- React : Pass function to child component
- Can you pass down state to child components with React Hooks?
- React Pass function to child component
- React Native pass function to child component as prop
- React Hooks : Why is it bad practice to pass the set state funcitons to a Child Component?
- How do I pass all state variables inside react hooks to my child component
- How can ı pass function with state for react useContext
- How do I pass a React Context's state through an onClick function created in a method inside that context class?
- Pass function down to child Component in React
- React pass function to child parent not re rendering
- React 15.1.0, Pass entire state from parent to child
- How to store react component in state and pass a callback function
- How to pass React Component prop to child function using {children}?
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- Set value of prop in child component and pass value back to state of app.js, react
- How to pass a state to a Parent component if I have a button triggering the state in the 2nd Child in React
- How to pass state value to a callback function using React Hooks
- Pass state from class component to function component in react
- Passing a state or prop to pass a value to child component in react
- React Redux state array variable pass as prop to child component, either infinite loop or empty array
- Pass function between two child components in React
- React - How can I set my parent state using child component, using function structures (not classes)
- Pass updated state of parent to child component in React JS
- Updating a React state from child component function
- cant pass react state to a child after setState()?
- How to pass state to child component with function based React?
- Calling a function to change state in parent component from the child component in react
- How to pass state from child to parent by right way in React
More Query from same tag
- React app / Chrome Dev Tools strange output: "in Startnull" - main.js: 42
- How to show tooltip for each react-select multiValue element?
- When using ReactJS and JSX, can we write plain JS code that somehow returns some elements?
- Disable a button when the input fields are empty in reactjs
- Karma unit testing: Module name "react" has not been loaded yet for context: _. Use require([])
- How to assign unique ID to element for each component instance
- Unhandled JS Exception: Cannot create styled-component for component: [object Object]
- How to change the route according to the value of a field
- How To Create Worker in React
- How to fix "TypeError: Cannot set property 'approved' of null"?
- React, typescript and prop-types: how to use own type?
- Filter function returns an empty array?
- How to in React Component constructor set this state
- react-router: pass props to es6 handler component
- Placing default value
- Include nested collections to firebase.profile
- How to reorganize data to display how many times a string appears in an array object?
- How can I redirect a user to login when a certain link is clicked using JWT
- React - this.setState doesn't work as expected until function is called a second time
- Display Alert inside function call not working Reactjs
- How to change graphql endpoint url name
- Making full-size main content with semantic-UI Sidebar react components
- How to sort data in ascending or descending order in Reactjs?
- ReactJS Modal hide by jquery imported via NPM
- Hide nav button in react-material-ui-carousel
- Why is 'history' necessary in the Router of React-Router-Dom?
- Javascript- Locking a string to prevent other methods from changing it
- How to filter array of objects in React
- Struggling to style div with html / css in react app
- react-bootstrap-table auto column width