React JSX renders double quotes around element

In a React component I generate a list of <option>s for <select>. This is done in ComponentDidMount() and stored in local state. This list is then rendered. However, each <option> gets enclosed in double quotes, which results in options not being shown on the page. Here's how they look:

This is an image from browser's dev tools (I had to send a pic because copying it was removing the quotes). The first two options are hardcoded, the rest come from an array stored in local state and these are being enclosed in double quotes and hence not displayed.

This is how I set up the options array and save it in local state:

  componentDidMount() {
    this.setUpWeekly()
  }    

  setUpWeekly() {
    if (this.props.poli) {
      const amountsKeys = Object.keys(this.props.poli.weekly_rates_array)
      const weekly = amountsKeys.map( weeks => {
        let weekOrWeeks
        if (weeks == 1) {
          weekOrWeeks = 'week'
        } else {
          weekOrWeeks = 'weeks'
        }
        return (
          `<option value="${this.props.poli.weekly_rates_array[weeks].amount_to_pay}">` +
          `${weeks} ${weekOrWeeks}` + 
          ` = $${this.props.poli.weekly_rates_array[weeks].amount_to_pay}</option>`
        )
      })
      this.setState(() => ({ weekly }))
    } 
  }

...and further down in render() I spread the options array:

    <Form.Control as="select" size="lg" onChange={this.onAmountToPayChange}>
      <option value="0">Please select...</option>
      <option value="111">2</option>
      {this.state.weekly !== null && [ ...this.state.weekly ]}
    </Form.Control>

I've also tried to use arr.map() method to display the options array but it rendered the same result. Trying to remove quotes by str.replace() method only removed quotes that I actually need - around value attribute.

So, to the question now: How do I display my select options? Please note, I use react-bootstrap. Thank you all who took an interest in solving my query.

2 answers

  • answered 2019-12-16 03:21 Joe Lissner

    You are setting it directly as a string in your setUpWeekly() function, try this:

      setUpWeekly() {
        if (this.props.poli) {
          const amountsKeys = Object.keys(this.props.poli.weekly_rates_array)
          const weekly = amountsKeys.map( weeks => {
            let weekOrWeeks
            if (weeks == 1) {
              weekOrWeeks = 'week'
            } else {
              weekOrWeeks = 'weeks'
            }
            return (
              <option value={this.props.poli.weekly_rates_array[weeks].amount_to_pay}>
                  {weeks} {weekOrWeeks} = ${this.props.poli.weekly_rates_array[weeks].amount_to_pay}
              </option>
            )
          })
          this.setState(() => ({ weekly }))
        } 
      }
    

  • answered 2019-12-16 03:29 Ranotronarison Nomena Arivony

    You are returning string in your function. You have to return JSX.

       return (
         <option value={this.props.poli.weekly_rates_array[weeks].amount_to_pay}> 
           `${weeks} ${weekOrWeeks} = ${this.props.poli.weekly_rates_array[weeks].amount_to_pay}`
         </option>
        )