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;```

Answer 1

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.

1. 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>
       )
   }
   

2. 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

Answer 2

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

Answer 3

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