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.
Related
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.
I am developing a web application using React JS. Now, I am trying to programmatically redirect to another route. I can redirect like this.
this.props.history.push('/event/${this.props.id}/edit');
But when I use that in the child component it is not working. This is my scenario. I have a parent component called, EventListComponent. Inside that component, I render another child component called EventWidgetComponent. I am redirecting in the child component. But this.props.history is always undefined when I use it in the child component. How can I fix it?
This is happening because your child component doesn't have the access to history. Child component is receiving the props from parent component not from Router, that's why.
These are the possible ways to solve the issue:
1- Either pass a method from parent to child and do the redirecting part inside parent component. Call that method from child component for redirecting.
2- Use withRouter hoc and render the child component inside that, it will provide access of history to child component.
Like this:
import { withRouter } from 'react-router-dom'
// Child component here
class Child extends React.Component {
// code
}
export default withRouter(Child)
Check this answer: Programmatically navigating in React-Router v4
3- Pass the reference of history to child in props:
<Child history={this.props.history} />
You can pass the history prop down from the component you are giving to a Route to the child component if you want to use it there.
Example
class App extends React.Component {
render() {
return (
<div>
{/* ... */}
<Route exact path="/" component={Parent} />
{/* ... */}
</div>
);
}
}
class Parent extends React.Component {
render() {
return (
<div>
<Child history={this.props.history} />
</div>
);
}
}
you can pass a prop to the EventWidgetComponent passed from the parent EventListComponent like onHistoryPush:
<EventWidgetComponent onHistoryPush={() => this.props.history.push('/event/${this.props.id}/edit')}
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
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'