I am trying to pass some data from a parents container to a child, but react doesn't render the data to be passed. Instead, the output on the 'p' tag is blank. What am I doing wrong?
Parent container:
//import Child from ...
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
text: "DUMMY TEXT"
}
}
render() {
return(
<Child data={this.state.text} />
);
}
}
Child component:
class Child extends Component {
render() {
return(
<p>{this.props.data}</p>
);
}
}
Related
How to access Parent's props in the Child's tag and function sayhello?
(I can access siblings and children without passing props as an argument but not the parent)____________________________________________
And (away from this example) If this refers to Parent, how to access Child's props?
And if this refers to Child as an html tag, is there a function to convert the result into the react component class? (not reassigning this as the class to a new variable () => instead of function())
Child:
class Child extends Parent{
constructor(props){
super(props);
}
render() {
return (
<p>{Parent.props.hello}</p> // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<button onClick={sayhello.bind(this)}></button> // <<<<<<<<<<<<<<<<<<<<<<<<
);
}
}
Parent:
class Parent extends React.Component{
constructor(props){
super(props);
}
render() {
<>
<Child/>
</>
}
}
sayhello:
function sayhello(){
console.log(Parent.props); // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
}
If you bind the function in component, you can refer to this.props:
class Child extends React.Component {
render() {
return (
<>
<button onClick={sayhello.bind(this)}>Click</button>
</>
);
}
}
class Parent extends React.Component {
render() {
return (
<>
<Child someProp="hello" />
</>
);
}
}
function sayhello() {
console.log(this.props);
}
I just started working with ReactJS so I am still getting the hang of it. I need some help with one aspect to which I found no answer. I am trying to call a function in a parent component from a child component, but I also want to receive an answer from the parent, containing some data. How can I achieve that?
Currently what I am doing is:
import Parent from './parent.js';
class Child extends React.Component {
constructor(props) {
super(props);
};
click = () => {
this.props.parentMethod();
}
render() {
<div onClick={this.click}>Hello Child</div>
}
}
class Parent extends React.Component {
constructor(props) {
super(props);
};
someMethod() {
console.log('bar');
}
render() {
<Child parentMethod={this.someMethod}>Hello Parent, {this.props.children}</Child>
}
}
You wouldn't normally do this. Data flows from parent ยป child in React. Thus, if executing a function on Parent changes data passed to Child, your Child component would re-render.
Using your example:
class Child extends React.Component {
render() {
<div onClick={this.props.changeName}>
Hello, {this.props.displayName}
</div>
}
}
class Parent extends React.Component {
constructor(){
this.state = {
name: "Bob",
}
}
changeName = () => {
this.setState({ name: "Sally" })
}
render() {
return(
<Child
changeName={this.changeName}
displayName={this.state.name}
/>
)
}
}
In this, clicking on the div inside Child would change the name property of Parent's state, which would then be passed to Child and get re-rendered.
You can keep the data on your parent component's state and pass it to children. After calling your function this data changes in the parent, then goes back to child again. By the way, you are missing returns in your render methods. Look for it.
const Child = ( props ) => {
const click = () => {
props.parentMethod();
}
return (
<div onClick={click}>
Hello, this is Child.
Data is now: {!props.data ? "No data yet!" : props.data }
</div>
);
}
class Parent extends React.Component {
state = {
data: "",
}
someMethod = () =>
this.setState({ data: "bar"});
render() {
return (
<Child data={this.state.data} parentMethod={this.someMethod} />
);
}
}
ReactDOM.render(<Parent />, 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>
Say you have a parent component:
// ParentComponent
class ParentComponent extends React.Component {
render() {
return(
<ChildComponent/>
)
}
}
From inside the child component, is there a way to access the class name of the parent component without passing this down as props?
// ChildComponent
class ChildComponent extends React.Component {
// ?????
getParentComponentName() {
return this.??? // Should return "ParentComponent"
}
render() {
return(
<div/>
)
}
}
I'd prefer to be able to access this without passing it down as props. Thank you!
You need to access ReactInternalFiber like
class Child extends React.Component {
constructor(props) {
super(props);
this.state = { name: '' }
}
getParentName = () =>{
this.setState({ name: this._reactInternalFiber._debugOwner.type.name })
}
render() {
return (
<div>
<h1>Name: {this.state.name}</h1>
<button onClick={this.getParentName}>Get Parent Name</button>
</div>
)
}
}
I am new in React ES6 and I think I am modifying the state in a wrong way. My code is like this when I set state on parent component:
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld"};
}
render() {
return(
<ChildComponent parentObj={this} /> // parentObj for parent context as props on child components
);
}
}
My problem is in other child components, I have to do it repeatitively, is there another way of doing it? I have no problem with React.createClass, but I want to code in es6 so i have this problem.
If you wanna pass the state {name:"helloworld"} do it like that:
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld"};
}
render() {
return(
<ChildComponent {...this.state} />
);
}
}
and in the child component you can do:
<Text>{this.props.name}</Text>
But If you want to pass the props of the component to it's child:
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld"};
}
render() {
return(
<ChildComponent {...this.props} />
);
}
}
and in the child component you can do:
<Text>{this.props.stuff}</Text>//place stuff by any property name in props
Now if you want to update the state of parent component from the child component you will need to pass a function to the child component:
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld"};
}
update(name){
this.setState({name:name})// or with es6 this.setState({name})
}
render() {
return(
<ChildComponent {...this.props, update: this.update.bind(this)} />
);
}
}
and then in child component you can use this : this.props.update('new name')
UPDATE
use more es6 and removed constructor
class App extends React.Component {
state = {name:"helloworld"};
// es6 function, will be bind with adding .bind(this)
update = name => {
this.setState({name:name})// or with es6 this.setState({name})
}
render() {
// notice that we removed .bind(this) from the update
return(
//send multiple methods using ','
<ChildComponent {...this.props, update = this.update} />
);
}
}
if you want to send the whole state :
return( <ChildComponent {...this.state} /> );
But this is likely a bad idea :)
edit: in your scenario, this sends a 'name' property to child component with value 'helloworld'
child of the component "this" value and how do I get to parent component?
ex:
class AComponent extends Component{
static getThis(){
return this;
}
}
class MainComp extends Component{
componentDidMoud(){
console.log(AComponent.getThis());
}
}
in this way, how do I get it?
You shouldn't get the parent component from a child component. If you need to do something (ie affect parent component state), then pass a function from the parent to the child as a prop to do it. If you need to read something, then pass the relevant data from parent to child as a prop to read it.
You can pass props down to children, whether it be a simple primitive value for the child component to use, or a function that can be used by the child component to change the state of the parent component. Here's a simple example.
ParentComponent.js
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
someState: true
};
this.someFunction = this.someFunction.bind(this);
}
someFunction() {
this.setState({
someState: false
});
}
render() {
return (
<ChildComponent aFunc={this.someFunction} aString="someValue"/>
);
}
}
ChildComponent.js
import React, { Component } from 'react';
class ChildComponent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className={this.props.aString}>
<button onClick={this.props.aFunc}>
Some text
</button>
</div>
);
}
}