Question 250172 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I display only the div I clicked in an array.map() element?

I have a page where it displays information about students, I’m currently using array.map() to show all students. There’s a function in this page, where you can click in one student to show more info. I’m using an onClick function to display a component. But when you click the student, the component is displayed at all the other students. How can I identify that I clicked the student X and show just X’s info, and not Y’s and Z’s too?

Here’s the page:

import React, { useState } from 'react';
import { BsFillCircleFill } from 'react-icons/bs';
import { FiSearch } from 'react-icons/fi';
import { IoIosArrowDropdown } from 'react-icons/io';

import * as colors from '../../config/colors';
import { Content, Search } from './styled';
import Title from '../../components/Subheader';
import DropInfo from '../../components/DropInfo';

export default function Relação() {
  const [info, setInfo] = useState(false);
  const [style, setStyle] = useState('drop');

  const handleDrop = (identifier) => {
    const newInfo = info;
    setInfo(!newInfo);
    console.log(identifier);

    const newStyle = style;
    switch (newStyle) {
      case 'drop':
        setStyle('drop-2');
        break;
      case 'drop-2':
        setStyle('drop');
        break;
      default:
        setStyle('drop');
        break;
    }
  };

  const alunos = [
    {
      id: 1,
      nome: 'Miguel Moreira Rodrigues',
      cpf: '000.000.000-00',
    },
    {
      id: 2,
      nome: 'Miguel Moreira Rodrigues',
      cpf: '000.000.000-00',
    },
  ];

  return (
    <>
      <Title
        nome="Relação de alunos"
      />
      <Search>
        <input type="text" placeholder="Digite sua busca" />
        <FiSearch size={30} className="lupa" />
      </Search>
      <Content>
        <div className="alunos">
          {alunos.map((aluno) => {
            if (info) {
              return (
                <>
                  <section>
                    <BsFillCircleFill size={24} color={colors.statusGreenColor} className="circle" />
                    <p>
                      {aluno.nome}
                      {' '}
                      CPF:
                      {' '}
                      {aluno.cpf}
                    </p>
                    <IoIosArrowDropdown
                      type="checkbox"
                      onClick={() => handleDrop(aluno.id)}
                      className={style}
                      size={24}
                    />
                  </section>
                  <DropInfo />
                </>
              );
            }

            return (
              <section>
                <BsFillCircleFill size={24} color={colors.statusGreenColor} className="circle" />
                <p>
                  {aluno.nome}
                  {' '}
                  CPF:
                  {' '}
                  {aluno.cpf}
                </p>
                <IoIosArrowDropdown type="checkbox" onClick={handleDrop} className={style} size={24} />
              </section>
            );
          })}
        </div>
      </Content>
    </>
  );
}

And here’s the component:

import React from 'react';

import { Info } from './styled';

export default function DropInfo() {
  return (
    <Info className="drop-info">
      <div className="lado-1">
        <p>
          <strong>Nome</strong>
          {' '}
          Miguel Moreira Rodrigues
        </p>
        <br />
        <p>
          <strong>CPF</strong>
          {' '}
          000.000.000-00
        </p>
        <br />
        <p>
          <strong>RG</strong>
          {' '}
          0000000000.0
        </p>
        <br />
        <p>
          <strong>Nascimento</strong>
          {' '}
          19/12/2005
        </p>
        <br />
        <p>
          <strong>Igreja</strong>
          {' '}
          Adventista
        </p>
      </div>
      <div className="lado-2">
        <p>
          <strong>Endereço</strong>
          {' '}
          Rua Jorge Brasilino, 217, Catolé
        </p>
        <br />
        <p>
          <strong>Cidade/Estado</strong>
          {' '}
          Horizonte-CE
        </p>
        <br />
        <p>
          <strong>Telefone</strong>
          {' '}
          (85) 9-9198-0673
        </p>
        <br />
        <p>
          <strong>Status civil</strong>
          {' '}
          Solteiro
        </p>
        <br />
        <p>
          <strong>Turma</strong>
          {' '}
          Professor Carlos
        </p>
      </div>
    </Info>
  );
}

To better explain my problem, here’s what happening:
enter image description here

enter image description here

Tags:

2

Answers


  1. 0

    It could be because you are missing a key property

    <div className="alunos">
          {alunos.map((aluno) => {
    …
    <section key={aluno.id}>
    …
    Login or Signup to reply.
  2. 0

    You need to use the id to specify which of your items you want the info to show on, something like this should do work for ya

    export default function Relação() {
  const [info, setInfo] = useState(false);
  const [style, setStyle] = useState('drop');

  const handleDrop = (identifier) => {
    const newInfo = info === identifier ? false : identifier; // open a new one or close the current
    setInfo(newInfo);

    ...rest of the function
  };

  return (
    <>
     ...rest of the component
     {alunos.map((aluno) => {
       if (info === aluno.id) { // only show the info where the id matches
         return (
           <React.Fragment key={aluno.id}> // you will want a key
             <section>
               ...component stuff
               <IoIosArrowDropdown
                 type="checkbox"
                 onClick={() => handleDrop(aluno.id)}
                 className={style}
                 size={24}
               />
             </section>
             <DropInfo />
           </React.Fragment>
         );
       }

       return (
         <section key={aluno.id}> // also want a key here
           ...component stuff
           <IoIosArrowDropdown
             type="checkbox"
             onClick={() => handleDrop(aluno.id)} // updated this to pass the id
             className={style}
             size={24}
          />
         </section>
       );
     })}
     ...closeComponent
    </>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search