How to show a component When I click a button using function components in react

Question

I am working on a React project, In that I have one parent component that is Studentslist.js in that component I have two buttons, one is Marketing button and another one is Computers button.

And I have one Card component that is Child for Studentslist.js.

Now first I have to hide Card component, I only want to show Card component when I click the Computers button.

I know how to do this by using Class based components but I am trying to do by using Function components.

This is Studentslist.js

import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist() {

    const [hide, show] = useState({})
    return(
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Marketing</button>
                        <button className='btn btn-primary ml-2'>Computers</button>
                    </div>
                    <Card></Card>
                </div>
            </div>
        </div>
    )
}

export default Studentslist

This is Card.js

import React from 'react';
import './Card.css';

function Card() {
    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='Registration'>
                        <form>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" className="form-control" id="password"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="qualification">Qualification</label>
                                <input type="text" className="form-control" id="qualification"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="branch">Branch</label>
                                <input type="text" className="form-control" id="branch"></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button className='cancel btn btn-danger ml-2'>Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Card

If you feel I am not clear with my doubt, please put a comment.

Nayan shah · Accepted Answer · 2020-03-23 13:55:49Z

2

This should work now.

import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist() {

    const [show, setShow] = useState(false);
    return(
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Marketing</button>
                        <button onClick={ () => setShow(!show)} className='btn btn-primary ml-2'>Computers</button>
                    </div>
                    {show && <Card></Card>}
                </div>
            </div>
        </div>
    )
}

export default Studentslist

answered Mar 23, 2020 at 13:55

Nayan shah

5513 silver badges8 bronze badges

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

Comments

Muhammad Haseeb · Accepted Answer · 2020-03-23 13:57:09Z

0

function Studentslist() {

    const [showCard, setShowCard] = useState(false);
    return(
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button onClick = {() => setShowCard(true)} className='btn btn-primary'>Marketing</button>
                        <button className='btn btn-primary ml-2'>Computers</button>
                    </div>
                    {showCard && <Card></Card>}
                </div>
            </div>
        </div>
    )
}

export default Studentslist

answered Mar 23, 2020 at 13:57

Muhammad Haseeb

1,3611 gold badge12 silver badges24 bronze badges

Comments

Hassaan Tauqir · Accepted Answer · 2020-03-23 13:57:16Z

0

This is how you can set up a toggle on the button.

const [toggle, setToggle] = useState(false)

<button className='btn btn-primary ml-2' onClick={() => setToggle(!toggle)>Computers</button>

{toggle && <Card></Card>}

answered Mar 23, 2020 at 13:57

Hassaan Tauqir

2,7521 gold badge16 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to show a component When I click a button using function components in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related