How user string input will show as background color in a div in react JS functional component

user_17729799 0
Viewed 228

I am trying to make a color box where users can input color as a string but will display output as a background color in react I tried this way but it did not work as expected I am just learning to react. thanks in advance Here is my code.

import "./styles.css";
import randomColor from "randomcolor";
import { useState } from "react";
let color = randomColor();
// const name = "rocky";
export default function App() {
  const [statecolor, setcolor] = useState({
    bg:"",
    dis:false
  });

  function displayColor(e) {
    const inputcolor = e.target.value;
    if (inputcolor === color) {
      setcolor( prevValues => {
        return { ...prevValues,bg:color,dis:true}
      
     } )
    }else{
      console.log("not found")
    }
  }
  return (
    <div className="App">
      <h1>show color with input matching</h1>
      {statecolor.map((statecolors)=>{
        return (
          <h2 style={{backgroundColor:statecolors}}>{statecolors}</h2>
        )
      })}
      
     
      <input type="text" value={statecolor} onChange={displayColor} />
    </div>

); }

reactjs javascript
3 Answers

You're not seeing the background color because you're not setting it to a proper value. statecolors is an object, but you're setting the entire object as the value in your code. You need to access statecolors.bg and set that. Assuming the user enters it as a proper value, hex or color, then the below would work:

      {statecolor.map((colorObject)=>{
        return (
          <h2 style={{backgroundColor:colorObject.bg}}>{statecolors}</h2>
        )
      })}
user_82862370

I'm not sure this is what you want to achieve, but here's what I wrote https://codesandbox.io/s/laughing-thunder-jlc28?file=/src/App.js

  • randomColor is unused actually because you doesn't want to display initially right?
  • I'm not sure why checking this inputcolor === color, it will always go to else (unless you know what the randomColor will be) so I skipped that part
user_171786790 
function displayColor(e) {
    const inputcolor = e.target.value;
    if (inputcolor) {
      setcolor( prevValues => {
        return { ...prevValues,bg:inputcolor,dis:true}
      
     } )
    }else{
      console.log("not found")
    }
  }

======================

{statecolor.map((colorObject)=>{
        return (
          <h2 style={{backgroundColor:colorObject.bg}}>{statecolors}</h2>
        )
      })}
user_125190100
Related