ReactJs сделать дополнительный компонент после отправки формы прямо под формой

Question

У меня проблема с отображением компонента после ввода данных в форму.

До сих пор мне удалось получить отправленные данные и получить ответ json, используя ax ios.

Препятствие после успешного получения данных, я не могу назвать дополнительные компоненты, которые я хочу отобразить в форме.

import React, { Component } from 'react'
import axios from 'axios'
import ListSchedule from './Sections/ListSchedule'

export default class FindShipmentSchedule extends Component {

    constructor(props) {
        super(props)

        this.state = {
            origin_unloc: '',
            destination_unloc: '',
            list_schedule: []
        }
    }

    changeHandler = e => {
        this.setState({
            [e.target.name]: e.target.value,
        })
    }

    submitHandler = e => {
        e.preventDefault();
        // console.log(this.state)

        const headers = {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }

        axios
            .post('url-api-here', this.state, {
                headers: headers
            })
            .then(response => {
                console.log(response)
                this.setState({list_schedule:response})
            })
            .catch(error => {
                console.log(error)
            })
    }

    render() {
        const { origin_unloc, destination_unloc } = this.state
        return (
            <div>
            {/* Content Wrapper. Contains page content */}
            <div className="content-wrapper">

                {/* Content Header (Page header) */}
                <div className="content-header">
                    <div className="container-fluid">
                        <div className="row mb-2">
                            <div className="col-sm-6">
                                <h1 className="m-0 text-dark">Find Shipping Schedule</h1>
                            </div>{/* /.col */}
                            <div className="col-sm-6">
                                <ol className="breadcrumb float-sm-right">
                                <li className="breadcrumb-item">Home</li>
                                <li className="breadcrumb-item active">Find Shipping Schedule</li>
                                </ol>
                            </div>{/* /.col */}
                        </div>{/* /.row */}
                    </div>{/* /.container-fluid */}
                </div>
                {/* /.content-header */}

                <div className="content">
                    <div className="container-fluid">
                        <div className="row">
                            <div className="col-lg-12">

                            <form onSubmit={this.submitHandler}>
                                <div className="card">
                                    <div className="card-body">
                                        <div className="row">

                                            <div className="col-md-4">
                                                <div className="form-group">
                                                    <label>Port of Loading</label>
                                                    <input
                                                            className="form-control"
                                                            name="origin_unloc"
                                                            value={origin_unloc}
                                                            onChange={this.changeHandler}/>
                                                </div>
                                            </div>

                                            <div className="col-md-4">
                                                <div className="form-group">
                                                    <label>Port of Destination</label>
                                                    <input
                                                            className="form-control"
                                                            name="destination_unloc"
                                                            value={destination_unloc}
                                                            onChange={this.changeHandler}/>
                                                </div>
                                            </div>

                                            <div className="col-md-4">
                                                <div className="form-group">
                                                    <button type="submit" style={{marginTop: 30}} className="btn btn-primary">Search</button>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </form>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
            {/* /.content-wrapper */}
        </div>

        )
    }
}

и мой ListSchedule. js

import React, { Component } from 'react'

class ListSchedule extends Component {
    render() {
        const { origin_unloc, destination_unloc } = this.state
        return (
            <div>
                {/* Main content */}
                <div className="content">
                    <div className="container-fluid">
                        <div className="row">

                            <div className="col-lg-12">
                                <div className="card">
                                    <div className="card-header border-0">
                                        <h3 className="card-title">Schedule List</h3>
                                    </div>
                                <div className="card-body table-responsive p-0">
                                    <table className="table table-striped table-valign-middle">
                                        <thead>
                                            <tr>
                                                <th>Ship Name</th>
                                                <th>Agent Name</th>
                                                <th>Service</th>
                                                <th>Voyage Number</th>
                                                <th>Imo</th>
                                                <th>Departure</th>
                                                <th>Arrival</th>
                                                <th>Origin</th>
                                                <th>Destination</th>
                                                <th>Total Duration</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Wan Hai 512</td>
                                                <td>CMA CGM</td>
                                                <td>CSN1MA</td>
                                                <td>0QY0GN1MA</td>
                                                <td>Wan Hai 512</td>
                                                <td>CMA CGM</td>
                                                <td>CSN1MA</td>
                                                <td>0QY0GN1MA</td>
                                                <td>Wan Hai 512</td>
                                                <td>CMA CGM</td>
                                                <td>CSN1MA</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                </div>
                                {/* /.card */}
                            </div>

                        </div>
                        {/* /.row */}
                    </div>
                    {/* /.container-fluid */}
                    </div>
                {/* /.content */}
            </div>
        )
    }
}

export default ListSchedule