'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