two select forms on one page reactjs

Question

I'm starting to learn React and I want to make it so that when choosing a color in one select, use it as the background of the page, and in another select, use the selected color as the font color. But now when I select a color in the first select, everything works as it should, and when I select a color in the second select, it overwrites the first color with a new one.

I assume that the problem is in the states and event.target.value. I looked for a solution to the problem but could not do anything. I will be glad if someone can help me solve this problem

class App extends React.Component {
  state = {
    valcolor: '',
    {bg: '',
    fc: '',}
  };
  handleColor =render() =>{
  this.setState({fc:''})
  }
  render() {
    const texts = ['white'["white",'red' "red", 'blue'"blue", 'yellow'"yellow", 'green'];"green"];
    const options = texts.map((text, index) => {
      return <option key={index}>{text}</option>;
    });
    let {bg} = {bg: event.target.value}
    const colors = ['black'["black",'red' "red", 'blue'"blue", 'yellow'"yellow", 'green'];"green"];
    const optionsColor = colors.map((color, indexColor) => {
      return <option key={indexColor}>{color}</option>;
    });
  
  return let(
 {fc} = {fc: event.target.value}<div>
    const divStyle =<div style={
    backgroundColor:this.state.color.bg , color: `${this.state.color.fc}`,>
      background:   `${bg}`,
    };<select
    return (
      <div style=onChange={divStyle}>
   (e) =>
    <select
        onChange={this.setState(event(prev) => this.setState({val: event.target.value},console.log({bg}prev,event fc: e.target.value }))
          }
        >
          {options}
        </select>
        <select
          onChange={(evente) =>
            this.handleColorsetState(event(prev) => ({ ...prev, bg: e.target.value }))
          }
        >
          {optionsColor}
        </select>
        <p>your<p choice>your font: {eventthis.targetstate.valuecolor.fc}</p>
        <p>your<p >your choice: {this.state.color.bg}</p>
      </div>
    </div>
  );
  }
}
export default App;

Answer 1

I guess this code will help you. in which by selection you are getting your expected outcome.

If its not your expected output say will try that even.

import React, { useEffect, useState } from "react";

function API() {
  const [color, setColors] = useState({
    bg: "",
    fc: "",
  });
  const texts = ["white", "red", "blue", "yellow", "green"];
  const options = texts.map((text, index) => {
    return <option key={index}>{text}</option>;
  });
  const colors = ["black", "red", "blue", "yellow", "green"];
  const optionsColor = colors.map((color, indexColor) => {
    return <option key={indexColor}>{color}</option>;
  });

  return (
    <div>
      <div style={{backgroundColor:color.bg , color:color.fc}}>
        <select
          onChange={(e) =>
            setColors((prev) => ({ ...prev, fc: e.target.value }))
          }
        >
          {options}
        </select>
        <select
          onChange={(e) =>
            setColors((prev) => ({ ...prev, bg: e.target.value }))
          }
        >
          {optionsColor}
        </select>
        <p >your font: {color.fc}</p>
        <p >your choice: {color.bg}</p>
      </div>
    </div>
  );
}

export default API;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>