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;

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

Collectives™ on Stack Overflow

Filtering Nested Arrays in React JS

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest