CODEWITHSUNDEEP
reactjsreact-intl
Sourabh Banka
Sourabh Banka

Reputation: 1117

validateDOMNesting(...): <span> cannot appear as a child of <option>

I am using react-intl for internalization. I am getting the error validateDOMNesting(...): <span> cannot appear as a child of <option> for the following code.

I am not using span. But on inspection the element it is automatically taking span.

Here is the code:

<select onChange={this.localeChageHandler}>
   <option value="english">
      <FormattedMessage
        id="navigation.header.navbar.english"
        defaultMessage="English"
      />
   </option>
   <option value="hindi">
     <FormattedMessage id="navigation.header.navbar.hindi" defaultMessage="HIndi" />
   </option>
</select>

Upvotes: 0

Views: 1291

Answers (1)

Amruth
Amruth

Reputation: 5912

Usually FormattedMessage will return span element, in order to ignore span element you have to pass options to children prop in FormattedMessage.

    <select onChange={this.localeChageHandler}>
              <FormattedMessage
                id="navigation.header.navbar.english"
                defaultMessage="English"
                children={
                  (formatedMessage) => <option value="English">{formatedMessage}</option>
                }
              />
          <FormattedMessage
                id="navigation.header.navbar.hindi"
                defaultMessage="HIndi"
                children= {
                  (formatedMessage) => <option value="HIndi">{formatedMessage}</option>
                }
              />
        </select>

Upvotes: 1

Related Questions