Filtering Nested Arrays in React JS

Question

I am attempting to filter a list of conversations by participant names. The participant names are properties inside of a participant list and the participant list is contained within a list of conversations.

So far, I have approached the problem by attempting to nest filters:

let filteredConvos = this.props.convos.filter((convo) => {
   return convo.conversation.conversation.participant_data.filter(
     (participant) => {
       return participant.fallback_name.toLowerCase().indexOf(
         this.state.searchTerm.toLowerCase()) !== -1;
     })
})

This appears to work, insofar as I can confirm (i.e. I put a whole bunch of console.logs throughout an expanded version of the above) that as the searchTerm state is updated, it returns matching the participant and the matching convo. However, filteredConvos is not correctly rendered to reflect the newly filtered array.

I am new to Javascript, React, and Stack Overflow. My best assessment is that I am incorrectly passing my filtered array items back to filteredConvos, but I honestly don't have a enough experience to know.

Any assistance is deeply appreciated.

Further context:

The data source I'm working with is a JSON file provided by google of an account's Hangouts chat.
HangoutSearch.js:


    class HangoutSearch extends Component {
      constructor(props) {
        super(props);

        this.state = {
          searchTerm: ''
        };

        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(e) {
        this.setState({
          searchTerm: e.target.value
        });
      }

      render() {

        let filteredConvos = this.props.convos.filter((convo) => {
          return convo.conversation.conversation.participant_data.filter(
        (participant) => {
          return participant.fallback_name.toLowerCase().indexOf(
            this.state.searchTerm.toLowerCase()) !== -1;
        })
        })

        return(
          <div>
        <Form>
          <Form.Control
            placeholder='Enter the name of the chat participant'
            value={this.state.searchTerm}
            onChange={this.handleChange} />
        </Form>
        <HangoutList filteredConvos={filteredConvos}/>
          </div>
        );
      }
    }

    export default HangoutSearch;

HangoutList.js


    class HangoutList extends Component {

      render() {
        return(
          <ListGroup>
            {this.props.filteredConvos.map((convo) => {
              return (
                <ListGroup.Item key={convo.conversation.conversation.id.id}>
                  {convo.conversation.conversation.participant_data.map(
                    (participant) => {
                      return (
                        <span key={participant.id.gaia_id}>
                          {participant.fallback_name}
                        </span>
                      )
                    }
                  )}
                </ListGroup.Item>
              )
            })}
          </ListGroup>
        );
      }
    }

    export default HangoutList;

What do you mean by "However, filteredConvos is not correctly rendered to reflect the newly filtered array."? Do you mean that HangoutList doesn't update? — cbr
– cbr, Commented May 27, 2020 at 20:47
@cbr Yes. The HangoutList component does not re-render the filteredConvos I've passed it. Would it help to see that component as well? However, I've placed a console.log(filteredConvos) after the filter block and filteredConvos remains unchanged. So I believe the problem arises before passing to the HangoutList. — almondmilk
– almondmilk, Commented May 27, 2020 at 20:57
Ah, spotted it. The inner .filter which you use as the condition for the outer filter. It returns an array, which is truthy in JS. Try .some instead. — cbr
– cbr, Commented May 27, 2020 at 21:13

cbr · Accepted Answer · 2020-05-27 21:18:31Z

1

The inner .filter always returns an array, which are truthy in Javascript. You could use .some instead:

let filteredConvos = this.props.convos.filter((convo) => {
  return convo.conversation.conversation.participant_data.some((participant) => {
    return participant.fallback_name.toLowerCase().indexOf( this.state.searchTerm.toLowerCase()) !== -1;
  })
})

answered May 27, 2020 at 21:18

cbr

13.8k3 gold badges43 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Filtering Nested Arrays in React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related