Check which state is activated and render the JSX accordingly
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");
}