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>
); }
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>
)
})}
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
inputcolor === color, it will always go to else (unless you know what the randomColor will be) so I skipped that partfunction 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>
)
})}