why do I get the above error in React? - if I take out the useState for 'count2' in Person.js it works well - but surely this should work?
I've got two files: Persons.js that renders a list of Person.js. 'people' array is passed in
import React, { useEffect, useRef, useContext, useState } from 'react';
import Person from './Person/Person';
const Persons = (props) => {
const [count, setCount] = useState(0);
const [people, setPeople] = useState([]);
useEffect(() => {
setPeople(props.people);
},
[] // this to ensure a one-off!
);
let increaseMe = () => {
setCount(count + 1);
}
let clickA = (event ) => {
let newPeople = [...people];
newPeople.push({ name: 'Tom', age: 16 })
setPeople(newPeople);
}
let list = people.map(p => Person({name: p.name, 'age': p.age}));
return (
<React.Fragment>
<div>Hello Persons - { props.message } </div>
<button className='btnStyle' onClick={increaseMe}>IncreaseMe</button> { count }
<button onClick={clickA}>click A</button>
{ list }
</React.Fragment>
)
}
export default Persons;
import React, { useState } from 'react';
const Person = props => {
const [count2, setCount2] = useState(0);
return (
<div key={props.name}>
{ props.name } - { props.age} - { count2 }
</div>
)
}
export default Person;