Check which state is activated and render the JSX accordingly Just wondering how I can go about doing this more efficiently/make it more visually appealing to the user?

     switch (this.state.selected) {
  case "all":
    styled = this.state.allKeywords.map(keyword =&gt; 
      &lt;div style={{display:  "flex", flexDirection: "row"}}&gt;
           &lt;Input key={Math.random} style={{height: "45px", marginBottom: "20px"}} onClick={this.onKeywordClick} value={keyword} onChange={this.onKeywordChange}&gt;&lt;/Input&gt;
           &lt;Button key={Math.random} onClick={() =&gt; this.deleteKeyword(keyword)} style={{height: "45px", marginLeft: "30px"}}&gt;Delete&lt;/Button&gt;
      &lt;/div&gt;
     );
    break;
  case "positive":
      styled = this.state.positive.map(keyword =&gt; 
        &lt;div style={{display:  "flex", flexDirection: "row"}}&gt;
             &lt;Input key={Math.random} style={{height: "45px", marginBottom: "20px"}} onClick={this.onKeywordClick} value={keyword} onChange={this.onKeywordChange}&gt;&lt;/Input&gt;
             &lt;Button key={Math.random} onClick={() =&gt; this.deleteKeyword(keyword)} style={{height: "45px", marginLeft: "30px"}}&gt;Delete&lt;/Button&gt;
        &lt;/div&gt;
       );  
     break;
  case "negative":
      styled = this.state.negative.map(keyword =&gt; 
        &lt;div style={{display:  "flex", flexDirection: "row"}}&gt;
             &lt;Input key={Math.random} style={{height: "45px", marginBottom: "20px"}} onClick={this.onKeywordClick} value={keyword} onChange={this.onKeywordChange}&gt;&lt;/Input&gt;
             &lt;Button key={Math.random} onClick={() =&gt; this.deleteKeyword(keyword)} style={{height: "45px", marginLeft: "30px"}}&gt;Delete&lt;/Button&gt;
        &lt;/div&gt;
       );
     break;
  default:
    console.log("No keyword list mapped");
}
If by this question you mean you want to prettify your code then Google "javascript prettify" and you will get numerous hits. For example, I picked the first one, Online JavaScript Beautifier and it did the following to your example with a few clicks. You can adjust the parameters of the prettifier to suit your needs. BTW this web site also mentions a Chrome plugin specifically aimed at prettifying code in Stack Overflow posts.

switch (this.state.selected) {
    case "all":
        styled = this.state.allKeywords.map(keyword =&gt;
            &lt;
            div style = {
                {
                    display: "flex",
                    flexDirection: "row"
                }
            } &gt;
            &lt;
            Input key = {
                Math.random
            }
            style = {
                {
                    height: "45px",
                    marginBottom: "20px"
                }
            }
            onClick = {
                this.onKeywordClick
            }
            value = {
                keyword
            }
            onChange = {
                this.onKeywordChange
            } &gt; &lt; /Input&gt; &lt;
            Button key = {
                Math.random
            }
            onClick = {
                () =&gt; this.deleteKeyword(keyword)
            }
            style = {
                {
                    height: "45px",
                    marginLeft: "30px"
                }
            } &gt; Delete &lt; /Button&gt; &lt;
            /div&gt;
        );
        break;
    case "positive":
        styled = this.state.positive.map(keyword =&gt;
            &lt;
            div style = {
                {
                    display: "flex",
                    flexDirection: "row"
                }
            } &gt;
            &lt;
            Input key = {
                Math.random
            }
            style = {
                {
                    height: "45px",
                    marginBottom: "20px"
                }
            }
            onClick = {
                this.onKeywordClick
            }
            value = {
                keyword
            }
            onChange = {
                this.onKeywordChange
            } &gt; &lt; /Input&gt; &lt;
            Button key = {
                Math.random
            }
            onClick = {
                () =&gt; this.deleteKeyword(keyword)
            }
            style = {
                {
                    height: "45px",
                    marginLeft: "30px"
                }
            } &gt; Delete &lt; /Button&gt; &lt;
            /div&gt;
        );
        break;
    case "negative":
        styled = this.state.negative.map(keyword =&gt;
            &lt;
            div style = {
                {
                    display: "flex",
                    flexDirection: "row"
                }
            } &gt;
            &lt;
            Input key = {
                Math.random
            }
            style = {
                {
                    height: "45px",
                    marginBottom: "20px"
                }
            }
            onClick = {
                this.onKeywordClick
            }
            value = {
                keyword
            }
            onChange = {
                this.onKeywordChange
            } &gt; &lt; /Input&gt; &lt;
            Button key = {
                Math.random
            }
            onClick = {
                () =&gt; this.deleteKeyword(keyword)
            }
            style = {
                {
                    height: "45px",
                    marginLeft: "30px"
                }
            } &gt; Delete &lt; /Button&gt; &lt;
            /div&gt;
        );
        break;
    default:
        console.log("No keyword list mapped");
}