I have a one react component which is nested inside a multi-level components and each of these components are getting a props from their parent components. As it was multi level nesting, I lost track of the parent component.
So, are there any ways to find, from which parent component we are getting the props to its child?
I tried with the below code. But it is not working.
this._reactInternalInstance._currentElement._owner._instance
Scenario:
First Component:
import React, { Component } from 'react'
import SecondLevelComponent from './SecondLevelComponent'
export class FirstLevelComponent extends Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<SecondLevelComponent data="From Main Parent Component" />
</div>
)
}
}
export default FirstLevelComponent
Second Component:
import React, { Component } from 'react'
import ChildComponent from './ChildComponent'
export class SecondLevelComponent extends Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<ChildComponent data2={this.props.data}/>
</div>
)
}
}
export default SecondLevelComponent
Child Component:
export class ChildComponent extends Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<h1>FROM PARENT TO CHILD {this.props.data2}</h1>
</div>
)
}
}
export default ChildComponent
Related
parent component has a p tag which animate it's inner text. animation works when i refresh the page.
here is the Parent component:
import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
rerender=()=>{
this.forceUpdate()
}
render() {
return (
<div>
<p className='animate-left'>Animation</p>
<Child rerender={this.rerender}/>
</div>
);
}
}
export default Parent;
here is the Child component:
import React, { Component } from 'react';
class Child extends Component {
clickHandler=()=>{
this.props.rerender()
}
render() {
return (
<div>
<button onClick={this.clickHandler}>Click</button>
</div>
);
}
}
export default Child;
i want to animate again/ re-render parent component by clicking the button of child component.
How to do that?
You have to have state in the parent component and pass down this state to the child component:
import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
};
}
rerender = () => {
this.forceUpdate();
};
forceUpdate = () => {
this.setState((state) => ({
counter: state.counter + 1
}));
};
render() {
console.log("got rendered");
return (
<div>
<p className="animate-left" key={this.state.counter}>Animation</p>
<Child rerender={this.rerender} />
</div>
);
}
}
export default Parent;
and in the child component update this state:
import React, { Component } from "react";
class Child extends Component {
clickHandler = () => {
this.props.rerender();
};
render() {
return (
<div>
<button onClick={this.clickHandler}>Click</button>
</div>
);
}
}
export default Child;
Parent Component
import React, {Component} from 'react';
import NameContainer from '../nameContainer/index'
export default class Vishal extends Component {
constructor(props) {
super(props);
this.state = {
data: "This is the data"
}
}
render() {
return(
<div>
<p>My name is Vishal</p>
</div>
)
}
}
Child Component
import React, {Component} from 'react';
export default class NameContainer extends Component {
}
How can I use a callback function and import from the child component? Any help will be highly appreciated
This violates the top-down philosophy of react and any sort of way to hijack that is probably not the direction you want to go.
What I think you mean to do is have state in the parent container, and allow the child to display and update that state.
i.e Parent.JS
import React, {Component} from 'react';
export default class NameContainer extends Component {
this.state = { name: 'Vishal' }
handleChange = this.setState({name: event.target.value})
render() {
return (
<Vishal name={this.state.name} handleChange={this.handleChange} /> )}
then in child js // Vishal.js
{ ...boilerplate }
handleChange = this.props.handleChange; // and e.g a button or textfield to allow the user to update the name.
render() {
return ( {this.props.name}) }}
this will display the stateful data of name (initalized as 'Vishal') from Parent.js in the child component, Vishal.js
I am trying to pass a state as props to another component. The child component (a button on the page) isn't receiving any props. I did a console.log to print the props received from the parent but I get an empty object {}. What am I doing wrong here?
Here is an excerpt from my code:
loan.js (Parent)
<ForecloseBtn id={this.state.lead_id} foreclose={this.state.isForeclosed } test="xyz"/>
ForecloseBtn.js (Child)
import React from 'react';
import { render } from 'react-dom';
class ForecloseBtn extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
this.state = {
lead_id: this.props.id,
isForeclosed: this.props.foreclose,
sample: this.props.test
};
}
render() {
return (
......
)
}
};
const App = () => (
<ForecloseBtn />
);
export default App;
You have to add a propTypes like this
static propTypes = {
id: object.isRequired,
foreclose: func.isRequired,
}
and for sure
import {
func,
object,
} from 'prop-types'
You can check my fiddle
Pass props to child
Hope this helps.
I have a code like this in my React application:
import React from 'react';
import ReactDOM from 'react-dom';
import ComponentB from './ComponentB';
class ComponentA extends React.Component {
constructor(props) {
super(props);
this.condition = this.props.condition;
}
render() {
return ReactDOM.createPortal(
<div id="abc"></div>,
document.getElementById('xyz'))
}
componentDidMount() {
ReactDOM.createPortal(
<div>
{
this.condition &&
<ComponentB />
}
</div>,
document.body)
}
}
Basically, I want to render ComponentB only after ComponentA has been mounted to DOM. Hence I have put the code for ComponentA inside componentDidMount of ComponentB. But still ComponentB is rendering before ComponentA has finished mounting to DOM.
Why is this happening and what's the solution to this problem?
I am not sure why you are using createPortal. But if you just want to achieve your goal, you just need to set your state condition in componentDidMount of first component telling to start rendering of your second component.
See if this helps.
const ComponentB = () => {
return (
<div>Hi is is componentB</div>
);
}
class ComponentA extends React.Component {
constructor(props) {
super (props);
this.state = {
renderB: false
};
}
componentDidMount() {
this.setState({
renderB: true
});
}
render () {
let {renderB} = this.state;
return (
<div>
<h3>Hey i am component A</h3>
{
renderB? <ComponentB /> : null
}
</div>
);
}
}
For example, a component like this:
import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
render() {
return (
<div className="App">
<BodyContent />
<BottomOne />
</div>
);
}
}
export default App;
I want to implement a function on BodyContent that unmount BottomOne and mounts BottomTwo instead, so when I activate the function, the code is reestructured to this:
import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
render() {
return (
<div className="App">
<BodyContent />
<BottomTwo />
</div>
);
}
}
export default App;
I'm very new to React, so if there's a better way to do it, I'm open to suggestions, but I really need that end result, a function on BodyContent that unmounts BottomOne and mounts BottomTwo.
You can maintain a state which tells which component to render. Something roughly like this
import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
changeBottomComponent = (comp) => {
this.setState({ showBottom: comp})
}
render() {
return (
<div className="App">
<BodyContent changeBottomComponent={this.changeBottomComponent}/>
{this.state.showBottom === 1 ? <BottomOne /> : <BotttomTwo />}
</div>
);
}
}
export default App;
To achieve that maintain a state variable in parent component (some kind of identifier for component) and use that state variable to render different component.
Along with that you also need to pass a function from parent to child and use that function to update the parent state value.
Like this:
class App extends Component {
constructor(){
super();
this.state={
renderOne: true,
}
this.update = this.update.bind(this);
}
update(){
this.setState({renderOne: false})
}
render() {
return (
<div className="App">
<BodyContent update={this.update}/>
{this.state.renderOne? <BottomOne /> : <BottomTwo/> }
</div>
);
}
}
Now inside BodyContent component call this.props.update() to render another component.
You can use state or props to render different components.
Example:
import React, {
Component
}
from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
constructor(props) {
super(props);
this.state = {
decider: false
};
}
render() {
const bottomContent = this.state.decider === true ? <BottomOne /> : <BottomTwo />;
return (
<div className="App">
<BodyContent />
{ bottomContent }
</div>
);
}
}
export
default App;
You can also directly use the components in the state and render them. Could be more flexible this way.
const BottomOne = () => <div>BottomOne</div>;
const BottomTwo = () => <div>BottomTwo</div>;
class Example extends React.Component {
constructor() {
super();
this.state = { show: BottomOne };
this.toggleComponent = this.toggleComponent.bind(this);
}
toggleComponent() {
// Use whatever logic here to decide.
let show = BottomOne;
if (this.state.show === BottomOne) {
show = BottomTwo;
}
this.setState({ show });
}
render() {
return (
<div>
<button onClick={this.toggleComponent}>Change</button>
<this.state.show />
</div>
);
}
}
ReactDOM.render(<Example />, document.getElementById('root'));
<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="root"></div>