How to change color of text in text area using button in react function

Question

`` hi everyone, I want to take color as input and then change the color of text according to it but it's not working can anybody help me.

import React, {useState} from 'react'

export default function Textform(props) {

//this is function
const newColor =()=>{
      const x = document.getElementById("mybox")
      let newc =color;
    if(x.style.color==="black"){
       x.style.color = setcolor(newc)
    }
    else{
        x.style.color = "black"
    }
    }

const changeColor =(event)=>{
  setcolor(event.target.value);
}

const onChange =(event)=>{
    setText(event.target.value);
}

const [text, setText] = useState("");
const [color, setcolor] = useState("")

return (
    <>
  

//text area input
<div className="mb-3">
    <textarea className="form-control" value={text} onChange={onChange} placeholder="Enter text "  name="" id="mybox"  rows="8"></textarea>
    </div>

//our color choice input
<div className="mb-3">
    <textarea className="form-control" value={color} onChange={changeColor} placeholder="Enter your color choice" name="" id="mybox"  rows="3"></textarea>
    </div>

//this is my button
<button className="btn btn-primary mx-1" onClick={newColor}> Change Color</button>

 </>
  )
}

I tried to create a text Area which take text as input and another text Area which take color as input and then created a button. when we press the button, it will change the color of text as per our choice. but I am going wrong in implementing this logic.

Answer 1

Ideally you shouldn't be using native DOM methods interrogate/update the DOM. Instead use a separate state. When the button is clicked transfer the text from the colorText state to the activeColor state, and use that value in the textarea's style attribute.

const { useState } = React;

function Example() {

  // Set up the states
  const [ colorText, setColorText ] = useState('');
  const [ activeColor, setActiveColor ] = useState('');
  const [ text, setText ] = useState('Example text');

  // One function to update the `colorText` state
  function handleColorText(e) {
    setColorText(e.target.value);
  }

  // One function to update the text from the
  // textarea
  function handleText(e) {
    setText(e.target.value);
  }

  // One function to take the value in the `colorText`
  // state, and apply it to the `activeColor` state
  function handleClick() {
    setActiveColor(colorText);
    setColorText('');
  }

  // The textarea now has a style attribute. It's
  // value is the value of `activeColor`.
  return (
    <div>
      <input
        type="text"
        name="color"
        value={colorText}
        onChange={handleColorText}
      />
      <button onClick={handleClick}>
        Change color
      </button>
      <textarea
        style={{ color: activeColor }}
        name="text"
        value={text}
        onChange={handleText}
      ></textarea>
    </div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

textarea { display: block; }

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