I'm calling an API to get an array of users, sort them, and put them in an array if the personalTrainerId is equal to my userId, and then render them into cards.
I'd like to receive the data as
MyClients: [{'userId':86,'firstName':'Client','lastName':'23','email':'newclient@ab'},{'userId':96,'firstName':'cl','lastName':'ie','email':'cl@ie'}]
But instead I get the result
MyClients: {'userId':86,'firstName':'Client','lastName':'23','email':'newclient@ab'},{'userId':96,'firstName':'cl','lastName':'ie','email':'cl@ie'},
(Without the brackets)
I get the response from the call, but when I try to render them, the object comes back as "undefined" - I'm quite new to this, and I might be approaching it all wrong. Any help would be appreciated.
My code for adding the response to an array:
function AddClients(response){
const users = response.data;
var newClient="";
const myId = parseInt(getUserId())
for(var i = 0; i < users.length; i++ ){
if (response.data[i].personalTrainerId === myId){
newClient=("{'userId':"+response.data[i].userId+",'firstName':'"+response.data[i].firstName+"',
'lastName':'"+response.data[i].lastName+"','email':'"+response.data[i].email+"'}")
//
myClients.push(JSON.parse(JSON.stringify(newClient)))
}
}
console.log("Length after this: "+ myClients.length); // returns 57 as expected
myClients.map(RenderCard) // Calling to render
}
Then I try to render it to a card with bootstrap:
const RenderCard = (card, index) =>{
return(
<Card border="dark" style={{ width: '18rem' }} key={index}>
<Card.Header>Client number: {card.userId} </Card.Header>
<Card.Body>
<Card.Title>Name:
{card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)}
</Card.Title> // Console.log returns "card firstname: undefined"
<Card.Text>
Mail: {card.email}
</Card.Text>
</Card.Body>
</Card>
)
}
__
I really don't know how to get the right data in. Is there a better approach? Am I just missing something? I get no errors, and as I'm new to this I don't really know how to debug it properly.
You must add your response to a state:
const [card, setCard] = React.useState({});
function AddClients(response){
setCard(response.data);
}
After that you can use that state to render the data. If you want to render an array you can use code like this:
return (
<>
{
cards.map(card=>
<Card border="dark" style={{ width: '18rem' }} key={index}>
<Card.Header>Client number: {card.userId} </Card.Header>
<Card.Body>
<Card.Title>Name:
{card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)}
</Card.Title> // Console.log returns "card firstname: undefined"
<Card.Text>
Mail: {card.email}
</Card.Text>
</Card.Body>
</Card>
)
}
</>
);
but if you have an object of card:
return (
<>
<Card border="dark" style={{ width: '18rem' }} key={index}>
<Card.Header>Client number: {card.userId} </Card.Header>
<Card.Body>
<Card.Title>Name:
{card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)}
</Card.Title> // Console.log returns "card firstname: undefined"
<Card.Text>
Mail: {card.email}
</Card.Text>
</Card.Body>
</Card>
)
}
</>
);