How to hide and show a div in react js

Question

I know this question has been asked a lot, but I don't really understand the answer mainly because all the answer use "Class" and I was taught to use function. I don't even understand the difference but every time I try using a class component, nothing works.

I am really new to React.js and I have a hard time understanding how it works.

I need to show and hide - <p className='service_explication more'>{props.more}</p> - on the click of a button with a smooth animation. I've tried with basic javascript but it doesn't work. I've tried a lot of things and now I am stuck and I don't find a good explanation to what I need.

Could you please help me ? I really want to learn but I'm having a hard time.

Thank you so much for your help.

import React, { useState } from 'react';
import '../assets/Section.scss';
import '../assets/Services.scss';

function Services(){




      function showMore(event){




    }

    const BlocService = (props) => {
    return <div className='service_sub_container'>
        <h1 className='service_name'>{props.name}</h1>
        <p className='service_explication'>{props.explication}</p>
        <p className='service_explication more'>{props.more}</p>
        <button onClik={showMore}>Plus</button>    
    </div>
    }




    return (

        <>
        <div className='main_container'>
            <div className='section_container'>
                <div className='title_intro_container'>
                    <h1 className='section_title'>Nos Services</h1>
                    <p className='section_intro'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.</p>
                 </div>

                <div className='service_container'>
                    <BlocService name={'Développeur Front/Web'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
                    <BlocService name={'Lead developper'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
                    <BlocService name={'Architectes Front-end'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
                    <BlocService name={'Développeur Front/Web'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
                </div>
            </div>
        </div>

        </>

    );
}

export default Services;```

I explain myself wrong. I want to show and hide <p className='service_explication more'>{props.more}</p> — Maëlle
– Maëlle, Commented May 5, 2020 at 14:35
OK, you should put BlockService in a separate file. Right now there is only one showMore in Services but you need to move it to the BlockService component and toggle a state to show/hide some div — HermitCrab
– HermitCrab, Commented May 5, 2020 at 14:42
I posted an answer with the full code for the BlocService component — HermitCrab
– HermitCrab, Commented May 5, 2020 at 14:48

msahin · Accepted Answer · 2020-05-06 09:56:29Z

First of all, don't feel bad for ask, everyone has to learn from the bottom.

Reactjs works making "renders" of the webpage in a dynamic way, so you have 2 options depending if you want a smooth animation or just a default show/hide.

If you want to show in a easy way, you can just make a condition which allows to create or not the desired div

function Component() {
    const [showed, setShowed] = useState(false)
    return (
        <div>
            <button onClick={()=>setShowed(!showed)}>Show/Hide</button>
            {showed && <div>HELLO</div>}
        </div>
    )
}

If you want to create smooth animations you might want to need classes. With React you can just add or remove classes with no problem and let css do the job, so you can make

function Component() {
    const [showed, setShowed] = useState(false)
    return (
        <div>
            <button onClick={()=>setShowed(!showed)}>Show/Hide</button>
            <div className={showed?classShowed:classHided>HELLO</div>
        </div>
    )
}

I hope this helps you

HermitCrab · Accepted Answer · 2020-05-05 17:51:52Z

0

Everything can be done inside the BlocService component. Using a state and conditional rendering:

import React, {useState} from 'react'

const BlocService = (props) => {
    const [more, setMore] = useState(false);

    const showMore = () => {
        setMore(!more);
    }

    return (
        <div className='service_sub_container'>
            <h1 className='service_name'>{props.name}</h1>
            <p className='service_explication'>{props.explication}</p>
            {more && <p className='service_explication more'>{props.more}</p>}
            <button onClick={showMore}>Plus</button>    
        </div>
    )
}

export default BlocService;

You also have to remove showMore from Services

edited May 5, 2020 at 17:51

answered May 5, 2020 at 14:44

HermitCrab

3,2641 gold badge14 silver badges10 bronze badges

9 Comments

Maëlle Over a year ago

So I need to create a BlocService.jsx and then call it inside Service.jsx ?

HermitCrab Over a year ago

Yes, it's better to have each component in its own file

Maëlle Over a year ago

I put it in another file but it is not working .. Should I surround it with a function ?

HermitCrab Over a year ago

You need to import React at the beginning of the file and export the component at the end, I just updated my answer

HermitCrab Over a year ago

Then inside Services, you can add import BlocService from './BlocService'

|

Shmili Breuer · Accepted Answer · 2020-05-05 14:46:15Z

0

In a functional component you would control state by the useState hook provided by react.

import React, {useState} from 'react'

function() services {

    const [show, toggleText] = useState(false)

    return (
        <div>
            <h2>Header text</h2>
            <button onClick={toggleText(!show)}>Toggle text button</button>
            {show && (<p>Text to toggle</p>)}
        </div>
    )

}

React Documentation

edited May 5, 2020 at 14:46

answered May 5, 2020 at 14:40

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to hide and show a div in react js

3 Answers 3

Comments

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related