Using LoDash chain and map to create component. QuoteSlides in .map is undefined

Question

I am trying to create a React Component from a filtered value of the quoteList array. .filter() is working as expected but the QuoteSlides variable in .map(QuoteSlides=> is undefined. The array QuoteSlides will only have 1 element.

let quoteList = shipment.quotes
const QuoteSlides = _
.chain(quoteList)
.filter(['state', 'accepted'])
.map((QuoteSlides) => {
  <div key={`quote${QuoteSlides.id}`}>
    <p>{QuoteSlides.amount}</p>
  </div>
})
.value();

A simplified version of shipment.quotes =

[{id: 1, state:'accepted', amount: 1000},{id:2, state:'pass', amount: 500}]

Answer 1

2 problems, one filter takes in a list (already in chain context) and predicate function...second problem you needed to return the results of map, have a look in case still not clear...i also just renamed you staging variable (it looks much better like that):

class App extends React.Component {

    render(){
    
    let quoteList = [{id: 1, state:'accepted', amount: 1000},{id:2, state:'pass', amount: 500}];
    const QuoteSlides = _.chain(quoteList)
                .filter((quote)=> (quote.state == 'accepted'))
                .map((quote) => (
                   <div key={`quote${quote.id}`}>
                     <p>{quote.amount}</p>
                   </div>
                   )).value();
    
      return <div>
        <h1>Test concept </h1>
        {QuoteSlides}
        
      </div>
    }

}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>


<div id='root'>
</div>