CODEWITHSUNDEEP
javascriptreactjs
Felipe Mateus
Felipe Mateus

Reputation: 21

How can i render a component but with multiples content

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;

Upvotes: 1

Views: 230

Answers (3)

Sinan Yaman
Sinan Yaman

Reputation: 5937

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()} </>
   )
}

Upvotes: 1

Tobias S.
Tobias S.

Reputation: 23835

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.

Upvotes: 0

Chuck
Chuck

Reputation: 804

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.

Upvotes: 1

Related Questions