The parent:
{console.log(this.state.popularityOne)}
{console.log(this.state.popularityTwo)}
{console.log(this.state.nameOne)}
{console.log(this.state.nameTwo)}// all defined
<Compare
popOne={this.state.popularityOne}
popTwo={this.state.popularityTwo}
nameOne={this.state.nameOne}
nameTwo={this.state.nameTwo}
/>
I console logged the props before they went in to the child component. But then in the cjhild component:
export const Compare = ({ pop1, pop2, name1, name2 }) => {
console.log("compare component");
console.log(name1);
console.log(name2);
console.log(pop1);
console.log(pop2);//all of these are undefined
return (
<div>
<h1> Artist 1: {name1} </h1>
<h1> Artist 2: {name2}</h1>//all i will see is artist 1, artist 2
</div>
);
}
};