Home How to change variable value in return of render with reactjs?
Reply: 1

How to change variable value in return of render with reactjs?

Sakshi Rawal
1#
Sakshi Rawal Published in 2017-12-04 07:26:51Z
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>
    )
}

I want to return the search products according to the if(n>0)condition and set flag value to 1 , if flag value remains 0 which i have initialized to 0 only , then i want to return only message. But the flag condition should be checked after the completion of if loop.

stack26
2#
stack26 Reply to 2017-12-04 07:37:27Z
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>
    )
}

Let me know if it helped. As far as my understanding this should solve your problem

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.332002 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO