I'm new in react and try to pass a value from the parent component to the child component to the props and store the value in the state. But it doesn't even call the console.log statements
This is my function to change the string by clicking on the button
let actionToPerform = "";
function changeEdit(){
if(actionToPerform === 'edit'){
actionToPerform = 'new'
}else{
actionToPerform = 'edit'
}
}
In the parent component, in render I have this:
<Edit action={actionToPerform}
/>
Child component
import React from 'react'; import * as styles from './edit.module.css';
export default class Edit extends React.Component {
constructor(props){
super(props);
this.state = {actionToPerform: this.props.actionToPerform}
console.log("props:" + props)
console.log("parsed state: " + this.state)
}
showContent = ()=>{
if(this.state.actionToPerform == "edit"){
return <div>Shoppinliste bearbeiten</div>
}
}
render() {
return (
this.showContent
)
}
}
my goal is, that based on the state which is change by clicking on the button, to show the div or not.
You are passing action props to the child, but parsing actionToPerform. You need to parse action in the child.
Console log should be outside the constructor.
export default class Edit extends React.Component {
constructor(props){
super(props);
this.state = {actionToPerform: this.props.action}
}
showContent = ()=>{
console.log("props:" + props)
console.log("parsed state: " + this.state)
if(this.state.actionToPerform == "edit"){
return <div>Shoppinliste bearbeiten</div>
}
}
render() {
return (
this.showContent
)
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments