K.S
K.S

Reputation: 463

How to display other text based on data getting from server in reactjs

How can I display some other text or icon based on data getting from server, here I am getting these following data from sever, and for all false parameter I want display some other text instead of false, if there false then I want to display some cross icon and if there is true then I want to display success icon, this is screen shot of my data enter image description here

And this is my function to show data

showPrice= () => {
debugger;
if (this.state.priceList !== undefined) {
  return this.state.priceList.map(price => {


    return (

      <tr>
        <td>{price.premiumname}</td>
        <td>dfdf</td>
        <td>{price.expired_time}</td>
        <td>{price.inrprice}</td>

    <td>{price.entertainmentvideo }</td>
        </td>}
        <td>{price.accesslesson}</td>
        <td>{price.exerciselesson}</td>
        <td>{price.lsystem}</td>
        <td>{price.vocabulary}</td>
        <td>{price.materialdownload}</td>
        <td>{price.exclusivewebinars}</td>
        <td>{price.tutoring}</td>
        <td>{price.conversation}</td>
        <td>{price.subscribtion}</td>
        <td>

Please help me I am new to Reacts Thanks

Upvotes: 0

Views: 451

Answers (1)

Dupocas
Dupocas

Reputation: 21317

Let's assume the following state, that get's updated after an API's call in componentDidMount:

state = { data : null }

componentDidMount(){
     APICall().then(data => this.setState({ data })) 
}

Now you just need to render the text based on the state's property. For example:

render(){
    <>
        !this.state.data ? <p>Loading</p> : <p>Loaded</p>
    </> 
}  

Upvotes: 1

Related Questions