Refreshing component after making api call Reactjs

Question

I have this component where it allows the user to search for friends on the app using their email address. The UI is an input form and when the user submits the form with the email, I want to return the friend's information under the form and adding a "Add Friend" button. Currently, I have implemented showing the result from the API call (the API works, I have tested many times) but it is not showing up for some reason.

Here is my code:

class FriendsView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchResults: []
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        var data = {
            email: this.state.friendEmail
        };
        fetch('/api/searchFriend', {
            method: 'post',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        }).then(response => {
            response.json().then(data => {
                this.setState({
                    searchResults: data
                });
            })
        });
    }

    handleEmailChange(event) {
        var email = event.target.value;
        this.setState({
            friendEmail: email
        });
    }

    render() {
        return (
            <div>
                <NavigationBar />
                <Container style={{ padding: 20 }}>
                    <Form onSubmit={this.handleSubmit}>
                        <FormGroup>
                            <Label><strong>Search for friends</strong></Label>
                            <Input type="email" name="email" onChange={this.handleEmailChange} placeholder="Friend's email address" required />
                            <br />
                            <Button>Search</Button>
                        </FormGroup>
                    </Form>
                    {this.state.searchResults.map((friend) => {
                        <div>
                            {friend.email}
                        </div>
                    })}
                </Container>
            </div>
        );
    }
}

My render() gets called again when setState() is called and when I debug it, I do see that friend is not null and it does contain information. I have also tried forceUpdate() but the same problem occurs. Does anyone have any idea what the problem might be?

Answer 1

you need a return statement in the map function.

{this.state.searchResults.map((friend) => return {
  <div>
    {friend.email}
  </div>
})}

or use parentheses

{this.state.searchResults.map((friend) => (
  <div>
     {friend.email}
  </div>
))}