'Display data in Table and Modal using ReactJs
I am new to react. I want to make dashboard using Reactjs and Reactstrap but I have a problem. I want to display my data in the table and show mya all data in modal, but data that appears only last data in table and this is my code.
My data from https://randomuser.me/api/?results=50
componentDidMount()
fetch("https://randomuser.me/api/?results=50")
.then((Response) => Response.json())
.then((findresponse) => {
this.setState({
data: findresponse.results
})
})
this is the render component
render() {
const { data, currentPage, todosPerPage } = this.state;
// Logic for displaying todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = data.slice(indexOfFirstTodo, indexOfLastTod
const renderTodos = currentTodos.map((todo, index) => {
return (
<tr>
<td> { index+1 } </td>
<td> { todo.id.value } </td>
<td> { todo.name.first } { todo.name.last } </td>
<td> { todo.email } </td>
<td> { todo.phone } </td>
<td>
<Button color="success" onClick={this.toggle}> View </Button>
</td>
<Modal isOpen={this.state.modal} toggle={this.toggle} >
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
<Form>
<FormGroup>
<Label for="exampleEmail">Name</Label>
<Input key= {todo.email} type="email" name="email" id="exampleEmail" disabled value= {todo.name.first} />
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</tr>
);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|