CODEWITHSUNDEEP
reactjs
Vamsi
Vamsi

Reputation: 392

How to update a state, by taking reference of other state

I am working on a React project In my project I have two components one is Parent and another one is Child. In Parent component I have two buttons, one is Signup button and another one is Login Button. I imported Child component to Parent component, In Child component I have only Signup form is there. So I put state for Child component, that state logic contains initially Child component has to hide when I click Sigup button at that time only I have to show Child component up to here I have done. But here I was struck, When I click Signup button then I have hide both Signup and Login buttons, In output I have to show only Signup form.

This is Parent.js

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

const Parent = () => {
  const [show, setShow] = useState(false)

  const [showButtons, setShowButtons] = useState(true)

  const showComponent = () => {
    setShow(true)
  }

  const hideButtons = () => {
    if(setShow(true)) {
      setShowButtons(false)
    }
  }
  return (
    <div className='container'>
      <div className='row'>
        {showButtons &&
        <div className='col-12' style={{display:"flex"}}>
          <div className='col-6'>
            <button className='btn btn-primary' onClick={() => {hideButtons(); showComponent()}}>Signup Form</button>
          </div>
          <div className='col-6'>
            <button className='btn btn-danger'>Login Form</button>
          </div>
        </div>
}
      </div>
      <div className='row'>
        <div className='col-12'>
          {show && <Child></Child> }
        </div>
      </div>
    </div>
  )
}


export default Parent

This is Child.js

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

const Child = () => {
    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='signupForm'>
                    <form>
  <div className="form-group">
    <label htmlFor="name">Name</label>
    <input type="text" className="form-control" id="name" placeholder="Enter name"></input>
  </div>
  <div className="form-group">
    <label htmlFor="email">Email</label>
    <input type="email" className="form-control" id="email" placeholder="Enter email"></input>
  </div>
  <div className="form-group">
    <label htmlFor="password">Password</label>
    <input type="password" className="form-control" id="password" placeholder="Enter password"></input>
  </div>
  <div className="form-group">
    <label htmlFor="confirmPassword">Confirm Password</label>
    <input type="password" className="form-control" id="confirmPassword" placeholder="Confirm password"></input>
  </div>
   <button type="submit" className="btn btn-primary mt-3">Submit</button>
</form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Child

If you think I am not clear with question please ask me where I am not clear

Upvotes: 0

Views: 36

Answers (2)

RABI
RABI

Reputation: 732

Do the following change in your parent.js then it will work

const hideButtons = () => {
    setShowButtons(false);
  };

Codesandbox here

Upvotes: 1

Jimmy-P
Jimmy-P

Reputation: 151

You are currently testing your setShow function for truthiness, but you want to test its corresponding value. So change your hideButtons function to this:

  const hideButtons = () => {
    if(show) {
      setShowButtons(false)
    }
  }

Upvotes: 0

Related Questions