I'm new to react. I dont know how to import json data in one of my component.
This is my json data:
[
{
"id": 1,
"firstname": "abc",
"lastname": "xyz",
"phone": "+91 789654123",
"email": "[email protected]"
},
{
"id": 2,
"firstname": "def",
"lastname": "uvz",
"phone": "+91 123456987",
"email": "[email protected]"
}
]
Here is list Component :
<Container>
<Grid>
<Grid.Row>
<Grid.Column>
<Header>List</Header>
<List>
<List.Item block>
<List.Content>FirstName and Last Name</List.Content>
<List.Content>Phone</List.Content>
</List.Item>
</List>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
Can anyone help me in displaying the list? Thanks in advance
You can import contacts from your data.json, and use the map() to iterate and display contacts.
import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";
import contacts from './data.json';
class App extends Component {
render() {
return (
<Container>
<Grid>
<Grid.Row>
<Grid.Column>
<Header>List</Header>
<List>
{contacts.map(el => {
return (
<List.Item key={el.id}>
<List.Content>
{el.firstname} {el.lastname}
</List.Content>
<List.Content>{el.phone}</List.Content>
</List.Item>
);
})}
</List>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
);
}
}
export default App;
Playground:
https://codesandbox.io/s/so-semantic-ui-jfobr
But I think using Table component from semantic-ui-react would be a better for this.
import React, { Component } from "react";
import { Table } from "semantic-ui-react";
import contacts from './data.json';
class App extends Component {
render() {
return (
<Table singleLine>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Id</Table.HeaderCell>
<Table.HeaderCell>Fullname</Table.HeaderCell>
<Table.HeaderCell>Phone</Table.HeaderCell>
<Table.HeaderCell>Email</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{contacts.map(el => {
return (
<Table.Row key={el.id}>
<Table.Cell>{el.id}</Table.Cell>
<Table.Cell>
{el.firstname} {el.lastname}
</Table.Cell>
<Table.Cell>{el.phone}</Table.Cell>
<Table.Cell>{el.email}</Table.Cell>
</Table.Row>
);
})}
</Table.Body>
</Table>
);
}
}
export default App;
Playground for Table version:
https://codesandbox.io/s/so-semantic-ui-28rq9
Docs:
https://reactjs.org/docs/lists-and-keys.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map