Htykuut

How can I compare if the props between two separate components have the same value?

1- Is what I'm seeking doable?

2- If not, how else could I accomplish the ask below:

The story:

• I have an array of car objects.
  Each car's name is displayed as <li /> on a <CarList /> component.
  Upon click on each <li/> the car's color is revealed




• I have a <Question /> component that renders: "What car is (random color here)"?

UI change:
How could I write a method that:

• Checks if the props.color of <CarList /> === the props.color of <Question />
  


• Then it fires a UI change such as:


• 
  onClick: If the car's color matches the question's color: change the <li /> to green (ie: background-color), else change it to red.

I'm struggling (wondering if it's possible) to compare props from different components + writing a method that checks and executes the UI change above.

This is the code reflecting the explanation above: Also here's the sandbox

// Garage

export default class Garage extends Component {

  state = {

    cars: [

      { name: "Ferrari", color: "red", id: 1 },

      { name: "Porsche", color: "black", id: 2 },

      { name: "lamborghini", color: "green", id: 3 },

      { name: "McLaren", color: "silver", id: 4 },

      { name: "Tesla", color: "yellow", id: 5 }

    ]

  };



  handleShuffle = () => {

    this.setState({

      cars: [...this.state.cars.sort(() => Math.random() - 0.5)]

    });

  };



  render() {

    const { cars } = this.state;

    const car = cars.map(car => (

      <CarList key={car.id} make={car.name} color={car.color} />

    ));



    const guess = cars

      .slice(2, 3)

      .map(car => <Question key={car.id} color={car.color} />);

    return (

      <>

        <div>{guess}</div>

        <button onClick={this.handleShuffle}>load color</button>

        <ul>{car}</ul>

      </>

    );

  }

}



// CarList

class CarList extends Component {

  state = {

    show: false

  };



  handleShow = () => {

    this.setState({ show: true });

    console.log(this.props);

    // check for props equality here



    //desired result for <li /> would be

    // className={ correctColor ? 'green' : 'red'}

  };



  render() {

    console.log("car color props:", this.props.color);

    const { make, color } = this.props;

    const { show } = this.state;

    return (

      <li onClick={this.handleShow}>

        {make}

        <span className={show ? "show" : "hide"}>{color}</span>

      </li>

    );

  }

}



// Question

const Question = ({ color }) =>

  console.log("question color prop:", color) || <h1>What car is {color}</h1>;

Yes, you can pass the correct color to the CarList component or the flag whether the CarList is a correct one. Check my sandbox.

https://codesandbox.io/s/92xnwpyq6p

Basically we can add isCorrect prop to CarList which has value of correctCar.color === car.color and we use it to determine whether we should render it green or red.

Theres many ways to do this but the simplest is to send the color in the question down to the car component.

https://codesandbox.io/s/my4wmn427x