render my parent component without passing down function in props
I have some components like this
<MainComponent>
<Component1>
<Component2>
<Component3>
</Component3>
</Component2>
</Component1>
</MainComponent>
I want change state of MainComponent inside Component3 without passing down props
You can do that with a state management framework Redux
check how you can do this https://redux.js.org/basics/usage-with-react
Redux will allow you to manage state between components without passing it in the props.
Related
I have a parent component which looks like this:
const Parent = () => {
return (
<Child_1 />
<Child_2 />
);
}
if any changes occur in one of the child components, will the Parent component re-renders ?
No, it will not re-render. If you pass any props to the component from the parent component and you update that prop in children or that prop update in the parent component so both will re-render. But if the data or state has no dependency on the parent component so it will not cause a re-render in the parent component.
State changes in Child component doesn't effect on the parent component, but when a state of parent component changes all the child components render.
I am having nesting as follows with switch using react router 4
<MainComponent>
<ChildComponent></ChildComponent>
<ChildComponent></ChildComponent>
<ChildComponent></ChildComponent>
<MainComponent>
On main component page i am having some state which i want to pass as props to this.props.children.
In Main component render method i had written {this.props.children} to access children component. Now how to pass my CustomProps to this.props.children
Thanks in Advance for help
Suppose your state is day:monday.then you need to pass the state in child as
<MainComponent>
<ChildComponent day={this.state.day}/>
<MainComponent>
And in your child component ChildComponent you can get your state using
this.props.day
Trying to clean my React app up a little with Container and Presentation components. I'm using react-router v4 and I previously used an onClick event for each job to show a specific job page:
<div onClick={() => this.props.history.push('/jobs/' + job.slug)}>
//The job info
</div>
Now I've created a dumb component in a separate file for the jobs like this:
const Jobs = (props) => (
<div>
{
props.jobs.map(job =>
<div key={job.slug} onClick(//todo)>
<p>{job.title} at <Link to="/">{job.company}</Link></p>
</div>
)
}
</div>
)
but I can no longer access this.props.history
How can I solve this issue? Should I pass another prop in the following:
<Jobs jobs={jobs}/>
To access router objects(match, history and location) via props of the component, either the component has to be rendered via Route or it should wrap with withRouter higher-order component.
Check whether your Jobs component is directly rendered via Route with something like this.
<Route path="/jobs" component={Jobs} />
If it's not the case, and Jobs component is rendered with JSX inside the render method of another component, then wrap it with withRouter higher-order component as follows before you export it.
export default withRouter(Jobs);
This will ensure that Jobs component has access to all the router props.
Also, make sure that you use props.history instead of this.props.history since now it's functional component.
I am using react-router(v3) for routing purpose in my app. I have some nested route and want to access parent component state in child component.
Route:
<Route component={Main}>
<Route path="home" component={Home} />
</Route>
Main Component(parent):
export default class Main extends Component {
constructor(prop){
super(prop);
this.state = {
user : {}
}
}
render(){
return (
<div>
Main component
</div>
)
}
}
Home Component(child):
export default class Home extends Component {
constructor(prop){
super(prop);
}
render(){
return (
<div>
Main component
want to access user data here. how to access user from parent component?
</div>
)
}
}
In Home component i want to access user data, that is in parent component Main. Is there any way to access parent component state in child component ?
Your problem is that you can't just pass user as props to Home because App is not direcly rendering Home. You're doing that through React-Router.
You got 2 approaches here:
Use a state management solution like Redux and connect() both Main and Home to the user in store. This way, user is not part of Main state, but part of the app store and can be accessed from other components. This is the most sophisticated / extensible solution.
Use Contexts. From the docs: In some cases, you want to pass data through the component tree without having to pass the props down manually at every level. You can do this directly in React with the powerful "context" API. If you want to avoid using Redux or Mobx or any state management this may be the way to go.
send state of parent component as props to child component.
within Parent component fetch child like this...
<Home user={this.state.user} />
Access user in child by this.props.user
In my App component, I pass a props called parameters to a Child component. The props value is a state element of App.
<App
<Child parameters={this.state.x}
/>
Is it normal that if I set a value to the parameters props in the child component, it's updating the state of the App component ?
Execute this in Child... :
this.props.parameters.foo='bar';
Will update the App state :
console.log(this.state.parameters.foo) //display 'bar'