'use two conditions to render html in React

I am trying to render an html div based on wether a condition has two values.

the wizard input is changing the responseType variable to either "textMessage" or "textToSpeech". not sure if I am doing the condition right...


const stepOne = () => {



const responseType = watch("responseType")


  return (

   <WizardInput
        type="radio"
        id="textMessage"
        checked={upload?.responseType === "textMessage"}
        tag={CustomInput}
        onChange={({ target }) => {
          handleInputChange(target);
        }}
        innerRef={register({
          required: "Add your message silly goose"
        })}
        value="textMessage"
        name="responseType"
        errors={errors}
      />
      <WizardInput
        type="radio"
        id="textToSpeech"
        checked={upload?.responseType === "textToSpeech"}
        tag={CustomInput}
        onChange={({ target }) => {
          handleInputChange(target);
        }}
        innerRef={register()}
        value="textToSpeech"
        name="responseType"
        errors={errors}
      />

// trying to render this h5 if textMessage OR textToSpeech

{ responseType === "textMessage" || "textToSpeech" && (

<div>
<h5>This here</h5>
</div>

)}

)}

Solution 1:^[1]

You need to check the equality again.

(responseType === "textMessage" || responseType === "textToSpeech") && (
  <div>
    <h5>This here</h5>
  </div>
)

Solution 2:^[2]

Try

(responseType === "textMessage" || responseType === "textToSpeech") && (<div>...</div>)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sifat Haque
Solution 2	cSharp

'use two conditions to render html in React

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]