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?

Possible duplicate of When should I use `return` in es6 Arrow Functions? — Estus Flask
– Estus Flask, Commented Dec 10, 2018 at 20:40

Eric Hasselbring · Accepted Answer · 2018-12-10 20:44:47Z

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

answered Dec 10, 2018 at 20:44

Eric Hasselbring

1,4141 gold badge11 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Refreshing component after making api call Reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related