I have two components child and parent. And I want to change the title of the parent component from the child component. But without hooks.
So I have this:
class App extends Component {
render() {
return (
<div className="app">
<ParentComponent/>
</div>
);
}
}
export default App;
and child component:
import React from 'react'
function ChildComponent(props) {
return (
<div>
<h1>Child COmponent</h1>
<button onClick={() => props.greetHandler('Niels')}>Greet parent</button>
</div>
)
}
export default ChildComponent;
and parent component:
class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
parentName: 'parent'
};
this.greetParent = this.greetParent.bind(this);
}
greetParent(childname) {
`${childname}`;
}
render() {
return (
<div>
<h1>{this.state.parentName}</h1>
<ChildComponent greetHandler={this.greetParent} />
</div>
)
}
}
export default ParentComponent;
But nothing happens And I got the message:
./src/ParentComponent.js
Line 19: Expected an assignment or function call and instead saw an expression no-unused-expressions
So my question: what I have to change that the title of parent component will change to Niels
you should change the state in greetParent function
greetParent(childname) {
this.setState({
parentName: childname
})
}
Related
I'm trying to change the state the a child component but don't change, this is the parent component:
export default class History extends Component {
constructor(props) {
super(props);
this.state = {
histories : JSON.parse(JSON.stringify(histories)),
counter: 1,
id: ''
}
}
increaseCounter = () => {
this.setState({counter: this.state.counter+1})
}
showIdHistory = (id) => {
this.setState(() => {return {id:id}})
}
render() {
return (
<div className="history">
<div>
<h3 className='titleHistory'>{searchHistoryById(this.state.id,this.state.counter)}</h3>
</div>
<div className='options'>
<div className='option'>
<BottonOptionA option='A' increaseCounter={this.increaseCounter} showIdHistory={this.showIdHistory}/>
<h2>{searchOptionById('a',this.state.counter+this.state.id)}</h2>
</div>
<div className='option'>
<BottonOptionB option='B' increaseCounter={this.increaseCounter} showIdHistory={this.showIdHistory}/>
<h2>{searchOptionById('b',this.state.counter+this.state.id)}</h2>
</div>
</div>
<div className='sectionStatics'>
<SelectionBefore optionAnterior={this.state.id}/>
<reacordOfOptions option={this.state.id}/>
</div>
</div>
);
}
}
i want that the parent component pass the state to the component called SelectionBefore but when the parent child changes the state, the props of SelectionBefore still is the same
this is the component child:
import React,{Component} from 'react'
export default class SelectionBefore extends Component {
constructor(props) {
super(props)
this.state = {
optionBefore : props.optionBefore,
}
}
render() {
return (
<div >
<p> Seleccion anterior: {this.state.optionBefore}</p>
</div>
)
}
}
Try following changes :
Child component
import React,{Component} from 'react'
export default class SelectionBefore extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div >
<p> Seleccion anterior: {this.props.optionAnterior}</p>
</div>
)
}
}
I have directly used the props which is passed by parent to the child .
This means that , whenever state of parent changes , your child will rerender and the changes will be shown .
Is it possible to create a method in Parent class in React and then pass it on to the Child and use it there.
So basically I would create a button in my Parent class, pass the function on to the Child and when the Button is clicked, the child will know about it and Parent will not really care for it?
class App extends Component {
clickMade = () => {
//This should be left empty
};
render() {
return (
<div className="App">
<Button onClick={this.clickMade}>Click me </Button>
<Child clickMade={this.clickMade} />
</div>
);
}
}
export default App;
And the Child:
class Child extends Component {
constructor(props) {
super(props);
this.handleClick = this.props.clickMade.bind(this);
}
handleClick = () => {
console.log("Click in child");
}
render() {
return null;
}
}
export default Child;
And a sandbox for this: CodeSandbox
App.js
class App extends Component {
clickMade = () => {
this.childRef.handleClick();
};
render() {
return (
<div className="App">
<Button onClick={this.clickMade}>Click me </Button>
<Child
ref={ref => {
this.childRef = ref;
}}
/>
</div>
);
}
}
I have a requirement in which I have to call a function present in a child component from parent component using React.createRef() but the problem here is that it is multilevel child.
I'm able to call a function present in 'ChildComponent1' component but not able to call a function present in 'ChildComponent2' component from 'Parent' component. Please tell me a correct way to do this.
This is my parent.js file
import React, { Component } from 'react';
import ChildComponent1 from './ChildComponent1';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
callFunctionFromChild = () => {
this.ref.current.doSomething()
}
render() {
return (
<div>
<ChildComponent1 ref={this.childRef} />
<button onClick={()=>{this.callFunctionFromChild()}}> Click Me <button>
</div>
);
}
}
export default ParentComponent;
This is my ChildComponent1.js file:
import React, { Component } from 'react';
import ChildComponent2 from './ChildComponent2';
class ChildComponent1 extends Component {
render() {
return (
<div>
<ChildComponent2 ref={this.props.ref} />
</div>
);
}
}
export default ChildComponent1;
and this is my inner ChildComponent2.js file:
import React, { Component } from 'react';
class ChildComponent2 extends Component {
doSomething = () => {
console.log("Something is done!!");
}
render() {
return (
<div>
My Child Component
</div>
);
}
}
export default ChildComponent2;
I'm having a hard time understanding the docs on how to access the DOM ref of a child class component from the parent class component.
Parent.js:
import Child from './Child';
class Parent extends Component {
constructor(props) {
super(props);
this.refOfTheParent = React.createRef();
}
componentDidMount() {
const parentDOM = this.refOfTheParent.current;
//const childDOM = ???;
}
render() {
return (
<div ref={this.refOfTheParent}>
<Child />
</div>
);
}
}
export default Parent;
Child.js:
class Child extends Component {
render() {
return (
<div>Child component</div>
);
}
}
export default Child;
Could someone please finish this code for me where childDOM in Parent::componentDidMount() has the DOM ref of <Child />.
Bonus: How would it look if Parent AND Child are both connected with react-redux connect.
You can use forwardRef
class Child extend React.Component{
render() {
return (
<div ref={this.props.forwardRef}> Child component </div>
)
}
}
export default React.forwardRef((props, ref) => <Child {...props} forwardRef={ref} />)
Then in parent
constructor(props) {
// ...
this.childRef = React.createRef();
}
render() {
return (
<div>
<Child ref={this.childRef} />
</div>
)
}
more info here
you can pass the ref in props in child component like
import React,{Component} from 'react';
import Child from './Child';
class Parent extends Component {
constructor(props) {
super(props);
this.refOfTheParent = React.createRef();
this.childRef=React.createRef();
}
componentDidMount() {
const parentDOM = this.refOfTheParent.current;
const childDom=this.childRef.current;
console.log(childDom);
//const childDOM = ???;
}
render() {
return (
<div ref={this.refOfTheParent}>
<Child childRef={this.childRef}/>
</div>
);
}
}
export default Parent
Child Component
import React,{Component} from 'react';
class Child extends Component {
render() {
return (
<div ref={this.props.childRef} id="1">Child component</div>
);
}
}
export default Child;
Demo
I am trying to call parent method from child component, but it doesn't work and method in parent element is not triggered. In this example I have only two components where ChildHello calls method in Hello component.
codesandbox
Hello.tsx
import * as React from "react";
interface Props {
itemClicked: () => void;
}
export class Hello extends React.Component<Props, {}> {
constructor(props: Props) {
super(props);
}
itemClicked = val => {
console.log(val);
};
render() {
const { name } = this.props;
return <h1 itemClicked={this.itemClicked}>{this.props.children}</h1>;
}
}
const styles = {
height: "400px"
};
export class ChildHello extends React.Component<Props, {}> {
constructor(props: Props) {
super(props);
}
render() {
return (
<div onClick={this.props.itemClicked} style={styles}>
<Hello>Hello Child</Hello>
</div>
);
}
}
You need to understand parent child relationship
in childHello you are using the click event.
<div onClick={this.props.itemClicked} style={styles}>
<Hello>Hello Child</Hello>
</div>
childhello is called by the index.jsx page
<div style={styles}>
<ChildHello name="CodeSandbox" />
</div>
Here you are not passing any click events. also, hello component is inside the child component which is wrong.
All the parent component should have click method involved and that method should be passed as props.
Like this
Parent:
<div style={styles}>
<Hello name="CodeSandbox" />
</div>
Hello component
render() {
const { name } = this.props;
return <ChildHello itemClicked={this.itemClicked} />;
}
ChildHello
render() {
return (
<div onClick={this.props.itemClicked} style={styles}>
Hello
</div>
);
}
Sandbox demo