How can i render a component but with multiples content

Question

I have a card component generator, that grabs info from a const array and renders an div with the data in a sort of a table inside a card UI component. I need to implement an ADD button inside of each card so i can open an modal with some inputs. But, as the modal is inside the function, every modal on differen cards are rendering the same how can i make an implementation so each modal grab something unique to the card being rendered ?

here's the code

function ProntCard() { const [modal, setModal] = useState(false);
  const columns = [
    {
      title: "Estado de Saúde",
      dataIndex: "1",
      key: "name",
      width: 150,
    },
    {
      title: "Diagnostico",
      dataIndex: "2",
      key: "age",
      width: 150,
    },
    {
      title: "Medicação",
      dataIndex: "3",
      key: "address 1",
      ellipsis: true,
    },
    {
      title: "Data de atendimento",
      dataIndex: "4",
      key: "address 2",
      ellipsis: true,
    },
    {
      title: "Nota",
      dataIndex: "",
      key: "address 3",
      ellipsis: true,
    },
    
  ];

  const nomes = [
    {
      nome: "Condições de Saúde / Comorbidades",
      colunas: [
        {
          title: "Estado de Saúde",
          dataIndex: "name",
          key: "name",
          width: 150,
        },
        {
          title: "Sintomas",
          dataIndex: "age",
          key: "age",
          width: 150,
        },
        {
          title: "Diagnóstico",
          dataIndex: "date",
          key: "address 1",
          ellipsis: true,
        },
        {
          title: "Data de atendimento",
          dataIndex: "address",
          key: "address 2",
          ellipsis: true,
        },
        {
          title: "Nota",
          dataIndex: "tags",
          key: "address 3",
          ellipsis: true,
        },
      ],

      laudos: [
        {
          key: "1",
          name: "Atípico",
          age: "Leve dor de cabeça",
          date: "Dipirona de 1g",
          address: "02/01/2021",
          tags: "Noite de Sono mal dormida",
        },
        {
          key: "2",
          name: "Convencional",
          age: "Leve dor membros",
          date: "Insulina de 1g",
          address: "02/01/2021",
          tags: "Mal estar",
        },
      ],
    },

function showModal() {
    setModal(!modal);
  }

  function CardsHost(props) {
    const cards = nomes.map((nome) => (
      <div>
        <div className="box2">
          <div className="box2header">
            <div>
              <h3>{nome.nome}</h3>
            </div>

            <div className="addSpan">
              <PlusCircleOutlined />
              <span onClick={showModal}> Adicionar</span>
            </div>
          </div>

          <div className="box2info">
            <Table columns={nome.colunas} dataSource={nome.laudos} />
          </div>
        </div>
      </div>
    ));

    return <div className="controler">{cards}</div>;
  }

  return (
    <>
      <div className="">
        <CardsHost posts={nomes} />
        
      </div>
      <Modal
        visible={modal}
        onOk={showModal}
        title="Novo Prontuário"
        onCancel={showModal}
        width={1000}
        
      >
     

      {columns.map((column) => (

      
    
  

        <div key={column.key} className="labelll">
          <label>{column.title}</label>
          <Input style={{ width: "61.3%" }} />
        </div>
        

        ))}
      </Modal>
    </>
  );
}
export default ProntCard;

Question is a little unclear to me. You want to map over the cards, and each card should have a unique ADD button? — Sinan Yaman
– Sinan Yaman, Commented Aug 16, 2021 at 19:44
each card should have a unique modal content, like the render gets the nome obj and creates the card. each card have a modal i have like 6 objects and it renders the 6 cards but each modal are equal, are the same — Felipe Mateus
– Felipe Mateus, Commented Aug 16, 2021 at 20:09

Chuck · Accepted Answer · 2021-08-16 19:53:30Z

1

If what you really want is pass specific data to the modal based on the Card you select, change this part.

 <span onClick={showModal}> Adicionar</span>

As follow.

<span onClick={() => {showModal(nome)}}> Adicionar</span>

Customize showModal function to set necessary data as a state.

answered Aug 16, 2021 at 19:53

Chuck

8147 silver badges19 bronze badges

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

Comments

Sinan Yaman · Accepted Answer · 2021-08-16 20:21:47Z

1

If I understood the question correctly, you can render different jsx for each different card:

 const cards = nomes.map((name, index) => (
       <UniqueCard key={index} name={name} />
    ));

UniquCard.jsx:

export const UniqueCard = ({key, name}) => {

  const renderCard = () => {
    switch(name){
      case 'name1':
        return <p style={{color: 'red'}}> Card name: {name} </p>

      case 'name2':
        return <p style={{color: 'yellow'}}> Card name: {name} </p>

      case 'name3':
        return <p style={{color: 'green'}}> Card name: {name} </p>

      default:
        return <p> No card </p>
    }
  }

  return (
    <> {renderCard()} </>
   )
}

answered Aug 16, 2021 at 20:21

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

Comments

Tobias S. · Accepted Answer · 2021-08-16 20:14:24Z

0

Use the index of the map-loop:

function showModal(index) {
    // use the index here to find element in array
}

const cards = nomes.map((nome, index) => (
    <span onClick={() => showModal(index)}> Adicionar</span>
))

You can assign this index to any property you want to use it later to uniquely identify each modal.

edited Aug 16, 2021 at 20:14

answered Aug 16, 2021 at 19:45

Tobias S.

24.3k7 gold badges37 silver badges64 bronze badges

2 Comments

Felipe Mateus Over a year ago

Thank you for replying, can you give me some examples of how can I assign it?

Tobias S. Over a year ago

i added an example

Collectives™ on Stack Overflow

How can i render a component but with multiples content

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related