如何使具有布尔值的状态属性显示在屏幕上（反应形式）

我正在用React JS制作旅行表格。来自用户的输入之一是复选框，需要用户根据他们的饮食限制（例如，无素食，无犹太洁食，无乳糖）来选中这些复选框。选中相应的框后，如何使此属性显示在屏幕上。我很难做到这一点，因为react不会在具有布尔值的状态下显示属性。

class App extends React.Component{
  constructor(){
    super()
    this.state ={
      firstName: "",
      lastName: "",
      age: "",
      gender: "",
      destination: "",
      isVegan: false,
      isKosher: false,
      isLactoseFree: false
      
       }
    this.handleChange = this.handleChange.bind(this)
  }
 
  handleChange(event){
   const {name, value, type, checked}= event.target
   type === "checkbox" ? 
   this.setState({[name]:checked}) : 
   this.setState({[name]:value})
   
 }

  
  render(){
    return(
       <main>
      <form> 
       
        <input
          value = {this.state.firstName}
          type= "text" 
          name="firstName"  
          placeholder= "First Name"                   
          onChange= {this.handleChange}/> 
     
     <input 
        value = {this.state.lastName}
        type= "text" 
        name="lastName"  
        placeholder= "Last Name" 
        onChange= {this.handleChange}
     />
     <br/>
        
     <input 
       value = {this.state.age}
       type= "number"
       name = "age"
       placeholder = "Age"
       onChange = {this.handleChange}
      />   
      <br />
        <label>
          
          <input
          value= "Male"
          name = "gender"
          type = "radio"
          checked = {this.state.gender === "Male"}
          onChange ={this.handleChange}
          
          />Male
           
          
          </label>
       <br />
        <label>
        <input
          value= "Female"
          name = "gender"
          type = "radio"
          checked = {this.state.gender === "Female"}
          onChange ={this.handleChange}
          
          />Female
        </label>
        
        <br />
        
        <select
          value = {this.state.destination}
          name = "destination"
          onChange = {this.handleChange}
          
          > 
          <option value = "">-- Please choose a destination --</option>
          <option value = "germany">Germany </option>
          <option value = "italy"> Italy</option>
          <option value = "spain"> Spain </option>
          <option value = "norway"> Norway </option>
        
         </select>
        <br />
        <label> 
          <input 
            type = "checkbox"
            name = "isVegan"
            onChange = {this.handleChange}
            checked = {this.state.isVegan}
           /> Vegan
         </label>
        
        <br />
        
         <label> 
          <input 
            type = "checkbox"
            name = "isKosher"
            onChange = {this.handleChange}
            checked = {this.state.isKosher}
           /> Kosher
         </label>
        
        <br />
        
         <label> 
          <input 
            type = "checkbox"
            name = "isLactoseFree"
            onChange = {this.handleChange}
            checked = {this.state.isLactoseFree}
           /> Lactose free
         </label>
        <br />
        <button> Submit </button>
      </form>
    <hr/>
        
        <h1> Passenger's Info </h1>
        <p>  Name : {this.state.firstName} {this.state.lastName} </p>
        <p>  Age : {this.state.age} </p>
        <p>  Gender : {this.state.gender} </p>
        <p>  Travel Destination : {this.state.destination} </p>
        <p> Dietary Restrictions : </p>
        
    </main>
    
    )
  }
}