×
  • React – The Complete Guide (incl. React Router 4 & Redux)

  • 21 – Handling Dynamic Content The JavaScript Way

    Lesson List
    Handling Dynamic Content
    Handling Dynamic Content

    In the last lesson we learn how to render a content dynamically or conditionally and then we simply take an advantage of the fact that everything in render() is javascript.
    I also mention in the last lesson that using the ternary expression as we did in div content is not necessarily optimal. If our application grows and as we possibly nest conditions it can be hard to keep track of which expression is responsible for what and to spot into our JSX code.


    So there is a cleaner solution for that which I want to show you in this lecture.
    So let me remove curly braces contains ternary expression { this.state.showPersons ? ( ... ) : null } so that for the moment all the persons are rendered all the time again. Make sure you only remove expression part not the div part.

    Keep in Mind:
    Now there is one important thing to keep in mind when react renders something to the screen when it decides that it needs to update the screen it executes the render method and not just return expression for everything in render() { return( ... ) }
    So every thing inside the render meyhod gets executed whenever react re-render the Components inside it, therefore we could advantage of it.

    Handling Dynamic Content : The JS way

    Taking advantage of that , we can add some code in render method before we return() something.
    so very first I will declare a variable person set as null (let person = null) Now this should be the default. After that I will add an if(){ ... } statement, I can write the if statement there because I am not inside the JSX code.

    src/App.js
    
    ...
      render(){
        ....
        const persons = null;
        if(this.state.showPersons){  // Boolean value
          persons = (
            {/* JSX code */}
          );
        }
        return(
        {/* JSX code */}
        )
      }
    

    So we will create a check statement and if the this.state.showPersons is true we will set our newly created variable perons to some JSX code.
    After that we will grab the entire div section which we want to show on condition i.e Person component and put inside if condition as given below.

    src/App.js
    
    ...
      render() {
    		const style = { ... };
    		let persons = null;
    		if (this.state.showPersons) {
    			persons = (
    				<div>
    					<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
    					<Person
    						click={this.switchNameHandler}
    						name={this.state.persons[1].name}
    						age={this.state.persons[1].age}
    						changed={this.nameChangedHandler}
    					/>
    					<Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
    				</div>
    			);
    		}
    		return (
    			<div className="App">
    				<h1> Heading</h1>
    				<button style={style} onClick={this.togglePersonsHandler}>
    					Switch Name
    				</button>
    				{persons}
    			</div>
    		);
    	}
    ...
    

    So if the condition get value true it will set the JSX code to that variable.
    At the end within the single curly braces I can output persons referring to the persons variable which is null by default or if showPersons is true and since render is gets called whenever react check if it needs to re-render this page or that particular component I should say since this happens every time re-render occurs we make sure that we always take the latest state we have into account and even render nothing or the persons because keep in mind one of the two things triggering an update is a state change.
    Now with this save your file and run the application in the browser. the behavior will be the same but the code is more elegant.

    This is the preferred way of outputting conditional content and its the way I recommend.

    React introduction
    React Component
    Handling Dynamic Content
  • Enable Notifications    Ok No thanks
    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept