Q:

Return one array object instead all the object based on the condition using map function

I want to get one index value form an array using map function based on condition in ReactJS. 
Currently i am getting all the index value if condition passes but i want to stop the condition once condition true.  so that i will one index while return...
JSON Object:
question: [

    {
        'question_type': 'TEXT',
        'question': 'how long have the founders known each other?', 
        'question_status': 'Done',
        'expectedAnswer': "",
        'answer': '5 yrs'
    },
    {
        'question_type': 'EITHER',
        'question': 'does any founder have an exit?', 
        'question_status': 'Pending',
        'expectedAnswer':['Yes','No'],
        'answer': "",
    },
    {
        'question_type': 'DROPDOWN',
        'question': 'Where are you from?', 
        'question_status': 'Pending',
        'expectedAnswer':['india','USA','UK'],
        'answer': "",
    },
]

React function where am doing Filter
const currentQuestion = question.map(function (data, i) {
            if (data.question_status === 'Pending') {
                return (
                    <Row key={i} className='chat-box'>
                        <Col xl='1' lg='1' md='1' className="question-image">
                            <img src='images/chatbot/rectangle-26.png' />
                        </Col>
                        <Col xl='11' lg='11' md='11' className="question-text">
                            {data.question}
                        </Col>

                        <Col xl="11" lg="11" md="11" className="answer-box ">
                            {/* <img className="answer-image pull-right" src='images/chatbot/group-9.png' /> */}
                            <div className="pull-right custome-radio">
                                {data.question_type === 'EITHER'?  this.renderEitherField(data.expectedAnswer):null} 
                            </div>
                        </Col>
                    </Row>
                );
            }

        }.bind(this));

Expected Output:
{
    'question_type': 'EITHER',
    'question': 'does any founder have an exit?', 
    'question_status': 'Pending',
    'expectedAnswer':['Yes','No'],
    'answer': "",

}
1st index value alone i want to filter instead of 1st and 2nd.  Currently i am getting 1st and 2nd index value since the both the question_status is "Pending",  but Here i want to get only 1st index value (once first occurred it has to stop return value)
Please let me know if this not best approach to go....

A:

You can use Array.find method.  It returns the first value from array which satisfies the condition else undefined. 

const data = [

                {
                    'question_type': 'TEXT',
                    'question': 'how long have the founders known each other?', 
                    'question_status': 'Done',
                    'expectedAnswer': "",
                    'answer': '5 yrs'
                },
                {
                    'question_type': 'EITHER',
                    'question': 'does any founder have an exit?', 
                    'question_status': 'Pending',
                    'expectedAnswer':['Yes','No'],
                    'answer': "",
                },
                {
                    'question_type': 'DROPDOWN',
                    'question': 'Where are you from?', 
                    'question_status': 'Pending',
                    'expectedAnswer':['india','USA','UK'],
                    'answer': "",
                },
            ]
const out = data.find(x => x.question_status === 'Pending')

console.log(out)

Please keep in mind that Array.find is not supported on IE.  You need to use a Polyfill. 
The other approach can be to return 0th index of the filtered array.  If present it will return the value else undefined.