I've developed a website that pulls data from a SQL database I created, containing details such as name, address, and occupation of individuals. I successfully managed to showcase this information on the webpage by structuring an array and inserting the data into it for retrieval. My goal now is to design a React component resembling a tile or nametag box that displays each person's name and job role separately for every entry. However, I am uncertain about how to create the React component and apply CSS styling to it.
Here is the code snippet for my webpage:
import React, { Component } from "react";
export class Dashboard extends Component {
displanyName = Dashboard.name;
constructor(props) {
super(props);
this.state = {
people: []
};
}
componentDidMount() {
fetch("api/people")
.then(response => response.json())
.then(data => this.setState({ people: data }));
}
render() {
//const { people } = this.state; // equivalent to next line
const people = this.state.people;
if (people.length > 0)
//creates an array to iterate
let arr = people.map((person, index) => <div key={index}>Person: {person.name} , Job: {person.job}</div>);
return (
<div>
{arr}
</div>
);
}
}
This code snippet showcases the array contents on the page in the following format: Person: Bob Bobbert , Job: Programmer Person: Jane Doe , Job: Teacher Person: John Smith , Job: Chef