React State Update

Question

I am taking the input from the user and checking if it is in the correct json format or not of which the logic is working perfectly.. The error is if the user inputs the correct format correctly or the wrong format consecutively.. my logic is not working because i am updating my state with not operator. I tried updating the values using componentWillMount() but that is also not working...Any help Would be appreciated.. Following is my code :-

import React from 'react'
import { Container, Segment, Icon, Form, TextArea, Button } from 'semantic-ui-react'
import './App.css'
import PrettyPrint from './PrettyPrint'
import JSON_Text from './Json_Template_Text'
import './Button.scss'
import Upload from './Upload'
import Failure from './Failure'

class jsonText extends React.Component{

    state = {
        text: '',
        flag_button: false,
        flag_fail : false
    }


    onChangeHandler = (event) => {
        this.setState({ text : event.target.value })
    }


    onSubmitHandler = () => {
        const json = this.state.text;
        if(this.IsJsonString(json))
            this.setState({ flag_button : !this.state.flag_button })
        else
            this.setState({ flag_fail : !this.state.flag_fail })
    }


    IsJsonString(str) {
        try {
            JSON.parse(str);
        } catch (e) {
            return false;
        }
        return true;
    }


    render(){

    return(

       <Container style = {content}>
           <Segment style = {segment}>
               <div style = {info}>
                    <div><Icon name = "lightbulb" size = "large" style = {icon} /></div>
                    <div style = {info_div} ><p style = {text}><strong>You may be wondering what is the format of the JSON !! <br />Well, we have got you covered..</strong></p></div>
               </div>
                 <center>

                    <div className = "json_example">
                        <PrettyPrint data = {JSON_Text} />
                    </div>
                    <div id="blank"></div>
                    <div id="blank"></div>

                    <div><p style = {text}><strong>Validate Your JSON Here..</strong></p></div>
                    <div id="blank"></div>


                        <Form onSubmit = {this.onSubmitHandler}>

                            <div className = "json_example" style = {form}>
                                <TextArea style={ TextCover } onBlur = {this.onChangeHandler} />
                            </div>

                            <div id="blank"></div><div id="blank"></div><div id="blank"></div><div id="blank"></div>


                            <Button className="button">
                                Submit
                                <div className="button__horizontal"></div>
                                <div className="button__vertical"></div>
                            </Button>  
                            {this.state.flag_button && <Upload />}
                            {this.state.flag_fail && <Failure />}

                        </Form>

                </center>

           </Segment>
       </Container> 
    )
  }
}

export default jsonText;

Answer 1

The is no need for you to use componentWillMount. Also that API is deprecated in latest react version

While updating state, you need to set both flag_fail and flag_button state directly and not toggle them like below

onSubmitHandler = () => {
    const json = this.state.text;
    if(this.IsJsonString(json))
        this.setState({ flag_button : true, flag_fail: false })
    else
        this.setState({ flag_fail : true, flag_button: false })
}