Getting string from a different function in React

Question

I have a class that accesses an API and returns the value in the API:

import React from 'react';

class UserList extends React.Component {
    constructor(props) {
        super(props);

        this.state = { customer: [] };
    }

    componentDidMount() {

        fetch('https://surpriserecommenderapi.herokuapp.com/[email protected]', {
            method: "post",
            headers: {
                "Content-Type": "application/json"
            }
        }).then(response => {
            // *** Check for HTTP success
            if (!response.ok) {
                throw new Error(`HTTP error ${response.status}`);
            }
            // *** Read the body, parse it as JSON
            return response.json();
        })
        .then(({ prediction }) => this.setState({ customer: prediction }))
        .catch(error => {
            // ...*** handle/report error...
        });
    }

    render() {

        const customers = this.state.customer.map((item, i) => (
            <div>
                <h1>{item}</h1>
            </div>
        ));

        return (
            <div id="layout-content" className="layout-content-wrapper">
                <div className="panel-list">{customers}</div>
            </div>
        );
    }
}

export default UserList;

{customers} returns a string "Rome" to display on the website. I am trying to call this in App.js. I am able to call UserList and display "Rome" however, I want to create an if statement that checks what the value of what is displayed. Like this:

const recommended = <UserList></UserList>
console.log(recommended);

  const recommendedPackage = () => {
    if(recommended === "Roam in Rome"){
      return(
        <div>Recommended package: Roam in Rome</div>
      )
    } else {
      return(
        <div>No recommended package</div>
      )
    }
  }

Any help would be appreciated!

Am I getting this right, you are trying to compare a component with a string? <UserList></UserList> is a call to React.createElement(), which is a function, not a string. — tdranv
– tdranv, Commented Apr 6, 2021 at 11:31

Aarni Joensuu · Accepted Answer · 2021-04-06 11:35:08Z

1

I believe you should implement the required logic in the UserList class, with some sort of conditional rendering. Maybe something like:

class UserList extends React.Component {
  ...
  parseCustomers() {
    return (
      this.state.customers.map(item => {
        if (item === "Rome") {
          // logic here
        } else {
          // logic here
        }
      });
    );
  }

  render() {
    const customers = this.parseCustomers();
    return (
      ...
    );
  }
}

answered Apr 6, 2021 at 11:35

Aarni Joensuu

7611 gold badge9 silver badges21 bronze badges

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

1 Comment

ajnabz Over a year ago

Thank you very much, this makes a lot of sense!

Collectives™ on Stack Overflow

Getting string from a different function in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related