Check which state is activated and render the JSX accordingly

Question

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 => 
      <div style={{display:  "flex", flexDirection: "row"}}>
           <Input key={Math.random} style={{height: "45px", marginBottom: "20px"}} onClick={this.onKeywordClick} value={keyword} onChange={this.onKeywordChange}></Input>
           <Button key={Math.random} onClick={() => this.deleteKeyword(keyword)} style={{height: "45px", marginLeft: "30px"}}>Delete</Button>
      </div>
     );
    break;
  case "positive":
      styled = this.state.positive.map(keyword => 
        <div style={{display:  "flex", flexDirection: "row"}}>
             <Input key={Math.random} style={{height: "45px", marginBottom: "20px"}} onClick={this.onKeywordClick} value={keyword} onChange={this.onKeywordChange}></Input>
             <Button key={Math.random} onClick={() => this.deleteKeyword(keyword)} style={{height: "45px", marginLeft: "30px"}}>Delete</Button>
        </div>
       );  
     break;
  case "negative":
      styled = this.state.negative.map(keyword => 
        <div style={{display:  "flex", flexDirection: "row"}}>
             <Input key={Math.random} style={{height: "45px", marginBottom: "20px"}} onClick={this.onKeywordClick} value={keyword} onChange={this.onKeywordChange}></Input>
             <Button key={Math.random} onClick={() => this.deleteKeyword(keyword)} style={{height: "45px", marginLeft: "30px"}}>Delete</Button>
        </div>
       );
     break;
  default:
    console.log("No keyword list mapped");
}

Answer 1

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 =>
            <
            div style = {
                {
                    display: "flex",
                    flexDirection: "row"
                }
            } >
            <
            Input key = {
                Math.random
            }
            style = {
                {
                    height: "45px",
                    marginBottom: "20px"
                }
            }
            onClick = {
                this.onKeywordClick
            }
            value = {
                keyword
            }
            onChange = {
                this.onKeywordChange
            } > < /Input> <
            Button key = {
                Math.random
            }
            onClick = {
                () => this.deleteKeyword(keyword)
            }
            style = {
                {
                    height: "45px",
                    marginLeft: "30px"
                }
            } > Delete < /Button> <
            /div>
        );
        break;
    case "positive":
        styled = this.state.positive.map(keyword =>
            <
            div style = {
                {
                    display: "flex",
                    flexDirection: "row"
                }
            } >
            <
            Input key = {
                Math.random
            }
            style = {
                {
                    height: "45px",
                    marginBottom: "20px"
                }
            }
            onClick = {
                this.onKeywordClick
            }
            value = {
                keyword
            }
            onChange = {
                this.onKeywordChange
            } > < /Input> <
            Button key = {
                Math.random
            }
            onClick = {
                () => this.deleteKeyword(keyword)
            }
            style = {
                {
                    height: "45px",
                    marginLeft: "30px"
                }
            } > Delete < /Button> <
            /div>
        );
        break;
    case "negative":
        styled = this.state.negative.map(keyword =>
            <
            div style = {
                {
                    display: "flex",
                    flexDirection: "row"
                }
            } >
            <
            Input key = {
                Math.random
            }
            style = {
                {
                    height: "45px",
                    marginBottom: "20px"
                }
            }
            onClick = {
                this.onKeywordClick
            }
            value = {
                keyword
            }
            onChange = {
                this.onKeywordChange
            } > < /Input> <
            Button key = {
                Math.random
            }
            onClick = {
                () => this.deleteKeyword(keyword)
            }
            style = {
                {
                    height: "45px",
                    marginLeft: "30px"
                }
            } > Delete < /Button> <
            /div>
        );
        break;
    default:
        console.log("No keyword list mapped");
}

Answer 2

1. Simple change to improve would be to extract the repeated peace in separate component:

<div style={{display:  "flex", flexDirection: "row"}}>
 <Input key={Math.random} style={{height: "45px", marginBottom: "20px"}} onClick={this.onKeywordClick} value={keyword} onChange={this.onKeywordChange}></Input>
 <Button key={Math.random} onClick={() => this.deleteKeyword(keyword)} style={{height: "45px", marginLeft: "30px"}}>Delete</Button>
</div>

2. You are incorrectly using key property on your components, I suggest you read the documentation on the keys in lists in react and see this stackoverflow question on why not use Math.random() as key.

You are also using key={Math.random} which is reference to the Math.random function rather than random value, though neither make sense.

3. As mentioned in one of the comments and another answer, code style is much easier to maintain using automated tools. Most modern code editors support code formatting.