Trying my hand at hooks and state in a function in React.js

Question

Is this code syntactically correct? The effect I'm trying to achieve is for the text to appear once the button has been clicked...

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

function Example(){
  const [state, setState] = useState({shows: false});

  return(
    <div>{state.shows && <p>hi</p>}
      <button onClick={() => setState({shows: true})}>
        Click me
      </button>
    </div>
  )
}

export default Example;

Sure, but for simple state it is usually better to name the state object for what it holds, i.e. shows and setShows, and give the initial value directly, i.e. useState(false). Your render then would be <div>{shows && <p>... For more complex state and mutations useReducer is recommended. — Drew Reese
– Drew Reese, Commented Oct 6, 2019 at 23:12
Determining if code is syntactically correct is pretty easy--see if it makes it past the parser. Maybe you meant something different. — Dave Newton
– Dave Newton, Commented Oct 6, 2019 at 23:17
@DrewReese Thats a good way to make it simpler...but Jiml made it apparent that I didn't have to change the conts. — user12099646
– user12099646, Commented Oct 6, 2019 at 23:24
@user12099646, true, be that as it may, but when you start creating or working with functional components with several state hooks you'll appreciate having meaningful variable names. — Drew Reese
– Drew Reese, Commented Oct 6, 2019 at 23:54

Jiml · Accepted Answer · 2019-10-06 23:15:59Z

1

Yes, but you don't need using object

function Example(){
 const [state, setState] = useState(false);

 return(
  <div>{state && <p>hi</p>}
   <button onClick={() => setState(true)}>
     Click me
   </button>
  </div>
 )
}

answered Oct 6, 2019 at 23:15

Jiml

3973 silver badges9 bronze badges

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

Comments

Phani · Accepted Answer · 2019-10-07 04:06:46Z

0

Yes, what you have implemented is fine.

But, Hooks are used to simplify the use of react state.

Hence, in your case, writing in the below format would considered as perfect

const [shows, updateShow] = useState(false);
<button onClick={() => updateShow(!shows)}>Click me</button>

Ref: https://reactjs.org/docs/hooks-state.html

answered Oct 7, 2019 at 4:06

Phani

907 bronze badges

Collectives™ on Stack Overflow

Trying my hand at hooks and state in a function in React.js

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