Блог

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

  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> } 
  

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

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

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