React props defined in parent but not defined in child component

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>
    );
  }
};

@deedee That is because you passed the prop names popOne, popTwo, nameOne, nameTwo instead of name1, name2, pop1, pop2.

it has to be the same name? really?

You are destructuring an object, so you must specify the property names you want to destructure from it.