javascript - count jsx within map looping - Stack Overflow

admin管理员组

文章数量:1023857

{items.filter(item => item.status === 'active').map(item =>
    let total_male = item.length + 1;
    <p>Male ({total_male})</p>
    {this.renderData(item)}
    </div>
)}

Is above jsx valid? It make sense to me but it has error. I have a json like this

[{"name":"james","satus":"active"},{"name":"alice","satus":"deactived"}]

I want to count the obj length that has status active.

{items.filter(item => item.status === 'active').map(item =>
    let total_male = item.length + 1;
    <p>Male ({total_male})</p>
    {this.renderData(item)}
    </div>
)}

Is above jsx valid? It make sense to me but it has error. I have a json like this

[{"name":"james","satus":"active"},{"name":"alice","satus":"deactived"}]

I want to count the obj length that has status active.

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Mar 2, 2017 at 9:26 MellisaMellisa 60533 gold badges1212 silver badges2222 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Write it like this:

var a = [
           {"name":"james","status":"active"},
           {"name":"alice","status":"deactived"}
];

class App extends React.Component { 

    _createList() {
       let count=0, active;
       active = a.filter(item => item.status === 'active');
       count = active.length;
       return active.map(item => <div>
              <p>Male Count: {count}</p>
              {this.renderData(item)}
            </div>
        )
       }
       
       renderData(item){
          return <div>{item.name}</div>
       }

    render() {
        return (
            <div>
               {this._createList()}
            </div>
        )
    }
}


ReactDOM.render(<App />, document.getElementById('container'));

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


<div id='container'/>

The jsx you provided is not valid because:

• There is </div> but no opening tag <div>
• The arrow function have have syntax error
• The arrow function have no return statement
• item object have no length property (from the JSON data you provided). Maybe you intended to use items.length instead?

Fix it:

{items.filter(item => item.status === 'active').map(item => {
    let total_male = items.length + 1;
    return (
        <div>
            <p>Male ({total_male})</p>
            {this.renderData(item)}
        </div>
    );
})}

Try to

{items.filter(item => item.status === 'active').map(item =>{
    let total_male = item.length + 1;
    return (
        <div>
            <p>Male ({total_male})</p>
            {this.renderData(item)}
        </div>
        )}
)}

You forgot return and closed div.

{items.filter(item => item.status === 'active').map(item =>
    let total_male = item.length + 1;
    <p>Male ({total_male})</p>
    {this.renderData(item)}
    </div>
)}

Is above jsx valid? It make sense to me but it has error. I have a json like this

[{"name":"james","satus":"active"},{"name":"alice","satus":"deactived"}]

I want to count the obj length that has status active.

{items.filter(item => item.status === 'active').map(item =>
    let total_male = item.length + 1;
    <p>Male ({total_male})</p>
    {this.renderData(item)}
    </div>
)}

Is above jsx valid? It make sense to me but it has error. I have a json like this

[{"name":"james","satus":"active"},{"name":"alice","satus":"deactived"}]

I want to count the obj length that has status active.

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Mar 2, 2017 at 9:26 MellisaMellisa 60533 gold badges1212 silver badges2222 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Write it like this:

var a = [
           {"name":"james","status":"active"},
           {"name":"alice","status":"deactived"}
];

class App extends React.Component { 

    _createList() {
       let count=0, active;
       active = a.filter(item => item.status === 'active');
       count = active.length;
       return active.map(item => <div>
              <p>Male Count: {count}</p>
              {this.renderData(item)}
            </div>
        )
       }
       
       renderData(item){
          return <div>{item.name}</div>
       }

    render() {
        return (
            <div>
               {this._createList()}
            </div>
        )
    }
}


ReactDOM.render(<App />, document.getElementById('container'));

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


<div id='container'/>

The jsx you provided is not valid because:

• There is </div> but no opening tag <div>
• The arrow function have have syntax error
• The arrow function have no return statement
• item object have no length property (from the JSON data you provided). Maybe you intended to use items.length instead?

Fix it:

{items.filter(item => item.status === 'active').map(item => {
    let total_male = items.length + 1;
    return (
        <div>
            <p>Male ({total_male})</p>
            {this.renderData(item)}
        </div>
    );
})}

Try to

{items.filter(item => item.status === 'active').map(item =>{
    let total_male = item.length + 1;
    return (
        <div>
            <p>Male ({total_male})</p>
            {this.renderData(item)}
        </div>
        )}
)}

You forgot return and closed div.

本文标签： javascriptcount jsx within map loopingStack Overflow