Как добавить данные в таблицу в виде ряда в react js с помощью post запроса?

Question

Я использую фейковый api JSONPlaceholder(незнаю влияет ли это на отображение в таблице, но скорее всего нет). При нажатии кнопки "Add Department" post запрос срабатывает в консоли, но не добавляет данные в виде ряда в таблицу.

Как правильно реализовать добавление ряда в строку? В методе handleSubmit есть строки кода где есть явно какие-то ошибки, а именно эти

json.body = (
                <tbody>
                    {this.posts.map(post => 
                        <tr key={post.id}>
                            <td>{post.userId}</td>
                            <td>{post.title}</td>
                        </tr>
                        )}
                </tbody>
            )

только я не знаю что именно не так

помогите разобраться

import React, { Component } from 'react'
import { Modal, Button, Row, Col, Form } from 'react-bootstrap'
import { Table } from 'react-bootstrap'

export class AddDep extends Component {
    constructor(props) {

        
        super(props);
        this.state = {
            posts: []
        }
        //this.handleSubmit = this.handleSubmit.bind(this);
    }

    

    handleSubmit(e) {
        e.preventDefault();
        let body = {
            userId: e.target.DepartmentTitle.value, 
            title: e.target.DepartmentName.value,
            body: e.target.DepartmentBody.value
        }
        fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify(body),
        headers: {
        "Content-type": "application/json; charset=UTF-8"
        }
        })
        .then(response => response.json())
        .then((json) => {
            alert(json.userId)
            console.log(json)
            json.body = (
                <tbody>
                    {this.posts.map(post => 
                        <tr key={post.id}>
                            <td>{post.userId}</td>
                            <td>{post.title}</td>
                        </tr>
                        )}
                </tbody>
            )
        })
        .catch(error => {
            console.log(error)
        })
    }


    render() {
        return (
            <Modal
            {...this.props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Add Department
                    </Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <div className="container">
                        <Row>
                            <Col sm = {6}>
                                <Form onSubmit = {this.handleSubmit}>
                                    <Form.Group controlId = "DepartmentName">
                                        <Form.Label>Department Name</Form.Label>
                                        <Form.Control
                                            type = "text"
                                            name = "DepartmentName"
                                            required
                                            placeholder = "Enter Department Name"
                                        />
                                    </Form.Group>
                                    <Form.Group controlId = "DepartmentTitle">
                                        <Form.Label>Department Title</Form.Label>
                                        <Form.Control
                                            type = "text"
                                            name = "DepartmentTitle"
                                            required
                                            placeholder = "Enter Department Title"
                                        />
                                    </Form.Group>
                                    <Form.Group controlId = "DepartmentBody">
                                        <Form.Label>Department Body</Form.Label>
                                        <Form.Control
                                            type = "text"
                                            name = "DepartmentBody"
                                            required
                                            placeholder = "Enter Department Body"
                                        />
                                    </Form.Group>
                                    <Form.Group>
                                        <Button variant="primary" type = "submit">
                                            Add Department
                                        </Button>
                                    </Form.Group>
                                </Form>
                            </Col>
                        </Row>
                    </div>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="danger" onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}


export default AddDep

БЛОГ НА HUSL

Как добавить данные в таблицу в виде ряда в react js с помощью post запроса?

Ответы (0 шт):