вернуть неопределенный вместо рендеринга HTML-тег

Question

У меня есть компонент

 import React from 'react'

export default function FilterRow (props){
 return (
   <div className="d-flex flex-row justify-content-between align-items-baseline">
     <label className="label-filter text-capitalize" htmlFor={props.id}>{props.text}</label>
     <button id={props.id} className="btn-filter" type="button" data-toggle="collapse" data-target={props.target}
      name={props.name}  onClick={props.buttonHandler}>
       { props.btnValue ?  "-"  :  "+" } 
     </button>
   </div>
  )
}

и родительский компонент, который передает реквизиты и функции этому компоненту:

  handleButtonStates = (event , prevState) => {
    const { name  } = event.target
    console.log("hi from" , name );
    this.setState(prevState => {
        return {[name] : !prevState[name]}
    })
  }

использование в родительском компоненте:

<FilterRow  id="sort-btn" text="sort by" btnValue={this.state.sortBtn}
                            buttonHandler={this.handleButtonStates} target="#collapseSort" name="sortBtn"/>

когда я использую эту функцию для условного рендеринга - и + она работает нормально, но когда я меняю - и + на значках fas или любом другом html-теге, подобном этому

{ props.btnValue ?  <label>y</label>  :  <label>no</label> } 

функция начинает возвращать неопределенный вместо кнопкиимя, почему это работает так и как я могу это исправить?

Answer 1

Некоторые опечатки в вашем коде:

Labe => label and <Label => <Label>