score:1

Accepted answer

You can use ternary operator(?:) to achieve conditional rendering

render() {
    return {this.state.validation == false?(
        <form
            onSubmit={
                (e) => {
                    e.preventDefault();
                    this.handleSubmit(this.state.cityValue);
                }
            }
        >
            <input type="text" value={this.state.cityValue} onChange={this.handleChange} />
            <input type="submit" value="Send" />
        </form>):

        (<App city={this.state.cityValue} />)
}}

score:1

Use Conditional Rendering.

You can try any of the below ways to implement conditional rendering in react:

  1. Using an if…else Statement
  2. Using a switch Statement
  3. Using Element Variables
  4. Using Ternary Operators
  5. Using Logical && (Short Circuit Evaluation)
  6. Using Immediately Invoked Function Expressions (IIFEs)
  7. Using Enhanced JSX Libraries

Refer Conditional Rendering in react docs: https://reactjs.org/docs/conditional-rendering.html


Related Query

More Query from same tag