class Personne extends React.Component {
// constructor(props){
// super(props);
// }
birthdayHandler = () => {
let Age = this.props.age;
let ageToNumber = parseInt(Age);
}
render(){
return(
<Fragment>
<div className={classes.maintitle}>
<h1 style={Name}> {this.props.name}</h1>
<div> Job : {this.props.job}</div>
<AgePersonne age={this.props.age}/>
<div> Sexe : <strong style={sex}>{this.props.sexe ? "Homme" : "Femme"}</strong></div>
<button onClick={(event) => this.birthdayHandler(event)} style={Button}>Birthday</button>
</div>
</Fragment>
)
}
}
I would like to increment the age of the person by clicking on the button.
the AgePersonne component looks just like this :
const agePersonne = (props) => {
const now = new Date();
const year = now.getFullYear();
return(
<div>Age : {props.age} - année de naissance :{year - props.age -1}</div>
)
};`
I did it already in a parent component with a button, but it increments all of my person's age. The APP component looks like this :
class app extends Component {
state = {
personne: [
{name: "Andy GARCIA", age: "28", job:"Web Dev", sexe: true},
{name: "Sylvie MOISAN", age: "60", job:"nurse", sexe: false},
{name: "Benjamin BARIOHAY", age: "27", job:"Web Dev", sexe: true},
{name: "Galina RAZLIVANOVA", age: "29", job:"Web Security consultant", sexe: false},
{name: "Maxime GIRARDEAU", age: "28", job:"Sailer", sexe: true},
]
}
render() {
return (
<Fragment>
<Horloge />
<Personne {...this.state.personne[0]}/>
<Personne {...this.state.personne[1]}/>
<Personne {...this.state.personne[2]}/>
<Personne {...this.state.personne[3]}/>
<Personne {...this.state.personne[4]}/>
</Fragment>
)
}
}
could you help me please ? I'm really lost, thank you
You need to create a function in your App that properly edit the state, something like :
const editAge = (index, newAge) => {
const newState = Object.assign({}, this.State);
newState[index] = {...newState[index], age: newAge};
this.SetState(newState);
}
And pass it to your Personne component, as well as its index :
<Personne editAge={editAge} index={index} (... your other props) />
You will be able to call the function as follow :
this.props.editAge('29', 0);
This will set 29 as the age of the first element of your App state.
The editAge function could also jsut accept a personne object, and the index. You would have to pass the entire object as props, it's as you wish.