React displaying message after submitting the form

Question

Trying to create a simple form and i am using semantic ui react. Problem is i can not display any message on the screen after form is submitted.

            <Form.TextArea
                required 
                label="Description"
                name="description"
                placeholder="Your description..."
                value={this.state.description}
                error={this.state.descriptionError}
                onChange={this.inputChange}
            />
            <Form.Button 
                fluid
                color="blue"
                disabled={
                    !this.state.term 
                    || !this.state.description
                }
            >Submit</Form.Button>

    {!this.state.formError
        ?
        <Message
            success
            header="Form completed"
            content="Thank you for your contribution."
        />
        :
        <Message
            error
            header="Missing fields!" 
            list={['All fields must be filled.']}
        />
    }
        </Form>

Edit: FormError part is here. Thanks for the replies. I will try them all

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

formSubmit = (e) => {
    e.preventDefault();
    let error = false;
    if(this.state.description.length < 10){
        this.setState({descriptionError: true})
        error=true
    }else{
        this.setState({descriptionError: false})
    }

    if(error){
        this.setState({formError: true})
        return
    }

    this.setState({formError: false})
}

Answer 1

Modify your code like this:

<Form success={this.state.formSuccess} error={this.state.formError}>

        <Message
            success
            header="Form completed"
            content="Thank you for your contribution."
        />
        <Message
            error
            header="Missing fields!" 
            list={['All fields must be filled.']}
        />
    <Form.TextArea 
        required 
        label="Description"
        name="description"
        placeholder="Your description..."
        value={this.state.description}
        error={this.state.descriptionError}
        onChange={this.inputChange}
    />
    <Form.Button 
        fluid
        color="blue"
        disabled={
            !this.state.term 
            || !this.state.description
        }
        onClick={this.handleSubmit}
    >Submit</Form.Button>
</Form>

Then create a submitHandler like this:

submitHandler = () => {
// Here do your stuff on submit
if(error){
  this.setState({formError: true, formSuccess: false});
}
else{
  this.setState({formError: false, formSuccess: true});
}

}

Hope this helps!

Answer 2

Here is the working code link - https://codesandbox.io/s/semantic-ui-react-responsive-navbar-drvf7?fontsize=14

You can just update the state value to true or false and see the message it is working fine.

Also, use positive for success and negative for Error inside the <Message/> component