creating elements through loop inside render function in react

Question

this.state.obj= [{"listing_id":"1","listing_name":"A"},{"listing_id":"2","listing_name":"iima "},{"listing_id":"3","listing_name":"dsffgdf"}];

inside render function =>

{this.state.obj.map((name,index) => 
  <tr key={index}>
    <td key={index} onClick={this.openOptions.bind(this,name.listing_id)}>{name.listing_id}</td>
    <td key={name.listing_name}>{name.listing_name}</td>
    if(name.listing_id == openOptionsvar){
      <td key={index+1} >Edit</td>
    }
  </tr>
)}

i want display last td element if openOptionsvar value equals to listing_id of that row??

Dez · Accepted Answer · 2017-04-06 10:35:02Z

1

listing_id is a React.PropTypes.string. Check which propType is openOptionsvar (probably a React.PropTypes.number). I am afraid they are different properties so you have to convert any of them to the correspondent propType and in your condition use the strict equality comparison, doing for example (if openOptionsvar is number):

 if(Number(name.listing_id) === openOptionsvar){
   <td key={index+1} >Edit</td>
 }

answered Apr 6, 2017 at 10:35

Dez

5,8878 gold badges47 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ved Over a year ago

I liked, Number(name.listing_id) === openOptionsvar instead , name.listing_id == openOptionsvar.

Shubham Khatri · Accepted Answer · 2017-04-06 10:41:04Z

You can write if condition within map as follows

class App extends React.Component {
  constructor() {
    super();
     this.state = {
          obj: [{"listing_id":"1","listing_name":"A"},{"listing_id":"2","listing_name":"iima "},{"listing_id":"3","listing_name":"dsffgdf"}]
     }
  }
  render() {
    var openOptionsvar = 2;
    return (
      <div>
      {this.state.obj.map((name,index) => {
      if(name.listing_id == openOptionsvar) {
        return <li>{name.listing_name}</li>
      }}
      )}
     </div> 
    )
  }
}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Ved · Accepted Answer · 2017-04-06 11:06:58Z

0

While using any loop in React to render elements, you must use key attribute. And try to use ternary operator instead of for loop. The ternary operator is a substitute for an if statement in which both the if and else clauses assign different values to the same field, like so:

render() {
        var openOptionsvar = 2;
        return (
          <div>
          {this.state.obj.length>0 && this.state.obj.map((name,index) => {
            return name.listing_id == openOptionsvar? <li key={index}>{name.listing_name}</li>:null
          }
          )}
         </div> 
        )
      }
    }

Edit:
use Number(name.listing_id) === openOptionsvar in place of name.listing_id == openOptionsvar

edited Apr 6, 2017 at 11:06

answered Apr 6, 2017 at 10:47

Ved

12.1k5 gold badges46 silver badges61 bronze badges

Collectives™ on Stack Overflow

creating elements through loop inside render function in react

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related