reactjsを使用してレンダリングの代りに変数値を変更するにはどうすればいいですか？

Question

render() { 
    let inputText=this.props.searchData 
    console.log(inputText); 
    let Inputreg = inputText.toLowerCase() 
    console.log(Inputreg) 
    console.log(this.state.Product) 
    let Product= this.state.Product; 
    let flag = 0; 
     return(
      <div> 
      { this.state.Product.map((obj,index)=> { 

       let productNameLow = obj.name.toLowerCase() 
       console.log(productNameLow) 
       var arr = productNameLow.split(' '); 
       console.log(arr) 
       console.log(Inputreg) 
       let n =(inArray(arr, Inputreg)); 
       console.log(n) 
       if (n > 0) { 
        return (
          <div className ="Product" key={index}> 
           <div className="card"> 
            {<Link to ={{pathname: './ProductDescription' , state: { item: obj } }} className="card-img-top"><img src={obj.thumbBig[0]} alt="" /></Link>} 
            <div className="card-body"> 
             <h4 className="card-title">{obj.name}</h4> 
             <p className="card-text-right"></p> 
             <input type="button" value="Add to Cart" onClick={e=>this.handleClick(obj.name,obj.price,obj.thumbBig[0],index)}/> 
             <input type="button" value="Add to Favourite" className="fav-button" id={index} onClick={e=>this.props.getFavourite(index)}/> 
            </div> 
           </div> 
          </div>  
        ) 
        {flag = 1}// flag value is not being set to 1 
       } 
      })} 

       {(() => { 
         if(flag == 1){ 
          return (
           <div> 
           <h2>No such product exist. Try another search</h2> 
           </div> 
          ) 
         } 
        })()} // function is self invoked , although i wanted to invoke this flag condition after my if(n>0) loop is completely iterated. 

     </div> 
    ) 
} 

if（n> 0）条件に従ってフラグを設定し、フラグの値が0の場合は0に初期化した後、メッセージのみを返します。ただし、ifループの完了後にフラグの状態をチェックする必要があります。

Answer 1

render() { 
    let inputText = this.props.searchData; 
    let Inputreg = inputText.toLowerCase(); 
    let Product = this.state.Product; 
    let flag = 0; 
     return(
      <div> 
      { this.state.Product.map((obj,index)=> { 

       let productNameLow = obj.name.toLowerCase() 
       console.log(productNameLow) 
       var arr = productNameLow.split(' '); 
       console.log(arr) 
       console.log(Inputreg) 
       let n =(inArray(arr, Inputreg)); 
       console.log(n) 
       if (n > 0) { 
        return (
          <div className ="Product" key={index}> 
           <div className="card"> 
            {<Link to ={{pathname: './ProductDescription' , state: { item: obj } }} className="card-img-top"><img src={obj.thumbBig[0]} alt="" /></Link>} 
            <div className="card-body"> 
             <h4 className="card-title">{obj.name}</h4> 
             <p className="card-text-right"></p> 
            </div> 
           </div> 
          </div>  
        ) 
        {flag = 1} 
       } 
      })} 

      {(flag == 0) && 
        <h2>No such product exist. Try another search</h2> 

      } 
      {(flag !== 0) && 
       <h2>Some other message</h2> 
      }      
     </div> 
    ) 
} 

助けてくれたら教えてください。私の理解でこれがあなたの問題を解決するはずです