Header.js

import React from 'react';
//import React, { Component } from 'react';
import './Header.css';
import react_logo from '../../quizLogo.svg';


class Header extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            message: this.props.message,
            formMessage: ''
        }
    }

    handleSearchSubmit = (event) => {

        //prevent the form to be submitted to its action url
        event.preventDefault();

        console.log("search button was clicked");


        console.log('Received values of form: ', this.state.formMessage);
        if (this.state.formMessage !== '') {


            fetch('http://localhost:3000/api/v1.0/', {
                method: 'POST',
                headers: {
                    'Accent': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ message: this.state.formMessage })
            }).then(
                response => {
                    if (response.status !== 200) {
                        console.log('Looks like there was a problem. Status Code: ' +
                            response.status);
                        return;
                    }
                    // Examine the text in the response
                    response.json().then(data => {
                        console.log(data['message']);
                        this.setState({ message: data['message'] })
                    });
                }
            )
                .catch(function (err) {
                    console.log('Fetch Error :-S', err);
                });

            
            this.setState({ formMessage: '' })
        }


    }



    handleInputChange = (event) => {
        this.setState({ formMessage: event.target.value })
    }




    render() {
        return (
            //this is JSX code which is very similar to HTML we already know

            <div className="header" style={{zIndex: '100'}} >
                <img src={react_logo} alt="React logo" /><a href="#default" className="logo"> {this.state.message}</a>
                <div className="header-right">
                    <div className="search-container">
                        {/*}
                        <form action="">
                            <input type="text" placeholder="New title..." name="txtSearch" value={this.state.formMessage} onChange={this.handleInputChange} />
                            <button type="submit" onClick={this.handleSearchSubmit}>New Title</button>
                        </form>
        */}
                    </div>
                </div>
            </div>
        );
    }
}
export default Header;