CODEWITHSUNDEEP
reactjsuse-state
PythonCoder1981
PythonCoder1981

Reputation: 463

useState React passing color

I am new to react and currently working on how to dynamically change the color of some text in my document. What I want to happen is that when the user clicks the "Click Me!" button the color of the words in the h2 tag change. It is not working and in the React tools I am getting an error that I am not sure how to fix.

App.js

import Start from './Start'
import './App.css';
import { useState } from 'react';

function App() {
  const [name, setName] = useState('Becky');
  const [color, setColor] = useState("#F0F8FF");
  const myArt = {color: {color}}
  

  const assetChange = (()=>{
    setName('Ethan');
    setColor("#FF7F50");
    
})

  return (
    <div className="App">
      <Start name={name}/>
      <h2 style={myArt}>Change my Color</h2>
      <button onClick={() => assetChange()}>Click Me!</button>
      
      {console.log(myArt)}
      
    </div>
  );
}

export default App;

The error that I am getting in the console is the below

Console Error

Upvotes: 0

Views: 426

Answers (2)

Muhammad Taseen
Muhammad Taseen

Reputation: 579

you should change

myArt = { color: {color} }

to

myArt = { color: color }

Upvotes: 2

Adam Jenkins
Adam Jenkins

Reputation: 55643

const myArt = {color: {color}}

expands to:

const myArt = {color: {color: 'the color' }}

What you want to write is this:

const myArt = {color}

Upvotes: 2

Related Questions