Complete code here:

https://codesandbox.io/s/react-components-and-component-practice-b9g97

Step 1: First we need to add a new state to our ColorPicker.js component. We will call this activeColor and setActiveColor and initialize our state with the string "red".

const [activeColor, setActiveColor] = useState("red");

Step 2: Next we can update the hard coded color in our JSX with our state variable activeColor

       <span className="picker-choice">
          {activeColor}
       </span>

Step 3: Then we need to pass setActiveColor down as a prop in our <ColorButton/>

<div className="button_container" />
      {colorButton.map((button, index) => (
        <ColorButton
          key={index}
          button={button}
          setActiveColor={setActiveColor}
        />
      ))}
    </div>

Step: 4 In our ColorButton.js file we can now add an eventlistener to our button tag.

We are going to call setActiveColor and pass in (props.button.color) to update our activeColor state variable. We have access to props.button.color the same way we have access to props.button.value We set our buttonValues as the initial state of colorButton We then mapped over colorButton and passed down our value and color as a prop on <ColorButton button={button} />. We can now update our activeColor state with setActiveColor and the props we get from button.

const ColorButton = props => {
  console.log(props);
  return (
    <button
      className="color_button"
      onClick={() => props.setActiveColor(props.button.color)}
    >
      <span role="img" aria-label="heart">
        {props.button.value}
      </span>
    </button>
  );
};

Step 5: Finally I am going to add back in our styles to update the color of the activeColor text as well.

import React, { useState } from "react";
import { buttonValues } from "../../data";
import ColorButton from "./ColorButton";

export default function ColorPicker() {
  const [colorButton, setColorButton] = useState(buttonValues);
  const [activeColor, setActiveColor] = useState("red");
  // console.log("color button", useState(buttonValues));

//used to update the text color depending on which button we press
  const styles = {
    color: "#E62739"
  };
  if (activeColor === "green") {
    styles.color = "#57e278";
  } else if (activeColor === "pink") {
    styles.color = "#e257c1";
  } else if (activeColor === "blue") {
    styles.color = "#2e6cd3";
  } else if (activeColor === "purple") {
    styles.color = "mediumorchid";
  } else if (activeColor === "yellow") {
    styles.color = "goldenrod";
  } else {
    styles.color = "#E62739";
  }
  return (
    <div>
      <p>
        {/* Using template literal to add space after color 👇 */}
        {`Color: `}
        <span className="picker-choice" style={styles}>
          {activeColor}
        </span>
      </p>
      <div className="button_container" />
      {colorButton.map((button, index) => (
        <ColorButton
          key={index}
          button={button}
          setActiveColor={setActiveColor}
        />
      ))}
    </div>
  );
}