How to define a state as object in react using hooks

Question

I ma working on a React project, I am trying to define an a state to a button. But state is not applying to a button can you please correct me

This is my code

This is App.js

import React, { useState } from "react";
import { Button } from "antd"
import 'antd/dist/antd.css';
import "./App.css";

const App = () => {
  const [buttonOne, setButtonOne] = useState("red")

  const [buttonTwo, setButtonTwo] = useState({
    backgroundColor: "red",
    color: "black",
    border: "red"
  })


  return (
    <div>
      <Button style={{backgroundColor: buttonOne, border: buttonOne}} className="one" type="primary">First</Button>
      <Button style={{backgroundColor: buttonTwo, color: buttonTwo, border: buttonTwo}} className="two" type="primary">Second</Button>
    </div>
  )
}

export default App
````

akhtarvahid · Accepted Answer · 2021-07-16 13:24:17Z

1

Try this

<div>
   <Button style={{backgroundColor: buttonOne, border: buttonOne}} className="one" type="primary">First</Button>
   <Button style={{backgroundColor: buttonTwo.backgroundColor, color: buttonTwo.color, border: buttonTwo.border}} className="two" type="primary">Second</Button>
</div>

Since your state is object, you need to go inner fields like -

buttonTwo.border or buttonTwo['color']

Example

<Button style={{backgroundColor: buttonTwo.backgroundColor, color: buttonTwo['color'], border: buttonTwo.border}} className="two" type="primary">Second</Button>

answered Jul 16, 2021 at 13:24

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy · Accepted Answer · 2021-07-16 13:24:43Z

1

For the second button you would need to access the object's properties.

backgroundColor: buttonTwo.backgroundColor

color: buttonTwo.color

border: buttonTwo.border

answered Jul 16, 2021 at 13:24

Andy

1561 silver badge12 bronze badges

Collectives™ on Stack Overflow

How to define a state as object in react using hooks

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related