Estou com dificuldades para renderizar informações especificas no meu código, por exemplo, gostaria de renderizar apenas o "id":1
, e as informações nele contida. Porem no código renderiza as informações dos dois (id:1 e id:2).
Esse é o arquivo JSON:
[
{"id":1,
"Marketplace": "ML1",
"Venda": "2452447411",
"Nome": "Daniel",
"Endereço": "Av. Paulista 1200",
"Data da venda": "10/05/2020"
},
{
"id":2,
"Marketplace": "ML1",
"Venda": "2452432412",
"Nome": "Hiago",
"Endereço": "Av. Berrini 1300",
"Data da venda": "02/04/2020"
}
]
Esse é o arquivo onde esta lendo o código:
const TrelloCard = ({text, id, index, }) => {
const [modalIsOpen, setModalIsOpen] = useState(false)
return(
<Draggable draggableId={String(id)} index={index} >
{provided => (
<CardContainer
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Card >
<CardContent >
<Typography gutterBottom> {text} </Typography>
<button onClick={() => setModalIsOpen(true)}>Informações</button>
<Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false) }>
<h1>Hello World</h1>
<h3>{text} </h3>
<div>
{Dados.map(post => {
return(
<>
<h4>{post.Nome}</h4>
<h5>{post.Venda}</h5>
<h5>{post.Marketplace}</h5>
</>
)
})}
</div>
<button onClick={() => setModalIsOpen(false)}>Fechar</button>
</Modal>
</CardContent>
</Card>
</CardContainer>
)}
</Draggable>
)
}
export default TrelloCard