Button doesn't work with useState (React)

Hello,

I created a component (sort of popup box) which displays a sign of horoscope, there’s an image and description. I added a button ‘more’ to see more description. I used a useState for it, but it doesn’t work.

Thanks for your help !

const Modal = ({

  children, visible, hide, fermer, more,

}) => {

  const popup = `popup ${visible ? 'block' : 'hidden'}`;

  return (

    <div className={popup}>

      {fermer ? null : (

        <button className="close" onClick={hide} type="button">X</button>

      )}

      {children}

      <button className="more" onClick={more} type="button">more</button>

    </div>

  );

};

export default Modal;
import './App.css';

import { useState } from 'react';

import Element from './Element';

import Modal from './Modal';

import Bd from './Bd';

function App() {

  const bd = Bd.map((element) => (

    <Element

      nom={element.nom}

      image={element.image}

      description={element.description}

      modulo={element.modulo}

    />

  ));

  const [year, setYear] = useState('');

  function handleChange(event) {

    setYear(event.target.value);

  }

  const [signe, setSigne] = useState([]);

  const [vis, setVis] = useState(false);

  const [desc, setDesc] = useState(true);

  function handleSubmit() {

    setVis(true);

    const yearModulo = Number(year) % 12;

    Bd.map((element) => (

      yearModulo === element.modulo ? setSigne(

        [<h1>{element.nom}</h1>,

          <div>{element.description.substr(0, 150)}</div>,

          desc ? <div />

            : <div>{element.description.substr(150, 600)}</div>,

          <img src={`/images/${element.image}`} alt="" />,

        ],

      ) : false

    ));

  }

  return (

    <div>

      <div>

        <input

          className="text-center font-bold"

          type="number"

          id="year"

          name="year"

          value={year}

          onChange={handleChange}

        />

        <button type="submit" onClick={handleSubmit}>Valider</button>

      </div>

      <div className="flex flex-wrap">{bd}</div>

      <Modal

        visible={vis}

        hide={() => setVis(false)}

        more={() => setDesc(false)}

      >

        <div>

          <div>{signe}</div>

        </div>

      </Modal>

    </div>

  );

}

export default App;

Hey there,

When you click the more button, this runs the function more. Where is this function in your code?

Thanks! I’ve just already found it.