Conditional render for react using state

Question

I am making a page where if there is something pulled from the database it displays this information, otherwise displays something else.

The data is pulled from a express back end at the moment.

Below is the code.

class ManageWorkstations extends React.Component {
  constructor() {
    super();

    this.state = { AccountDetails: [], exist: "" };
    this.getItems = this.getItems.bind(this);
  }

  // sets the questions from sql into state for questions
  getItems() {
    try {
      var user = window.localStorage.getItem("User");
      if (user) {
        fetch(`/profile-work-station-detailss/${user}`)
          .then(recordset => recordset.json())
          .then(results => {
            console.log(this.state.AccountDetails);
            this.setState({ AccountDetails: results.recordset });

            console.log(this.state.AccountDetails);

          });
      } else {
        alert("user not set");
      }
    } catch (e) {
      console.log(e)
    }
  }

  //when the component mounts make the sql questions the
  componentDidMount() {


    this.getItems()

    console.log(this.state.AccountDetails)
  }

  render() {
    if (this.state.AccountDetails.DeskLocation) {

      return (
        <ul>
          <Link to="/profile">
            <button style={{ float: "left" }} className="btn btn-secondary">
              Account Details
              </button>
          </Link>
          <button
            style={{ float: "left" }}
            className="btn btn-secondary"
            disabled
          >
            Manage Workstations
            </button>

          <DisplayAddWorkstation />

          <br />
          <br />

          {this.state.AccountDetails &&
            this.state.AccountDetails.map(function (AccountDetails, index) {
              return (
                <WorkStations AccountDetails={AccountDetails}></WorkStations>
              );
            })}
        </ul>
      )
    } else {
      return (<>this is what I want</>)
    }
  }
}

export default ManageWorkstations;

As I hope you can see, I am using an if statement in the render to display if these exist. However, the only statement I can get to work with it, is if I set it so that account details do not exist. How would I update this so that it can correctly find this information and not just so that it always thinks it does not exist.

Is DeskLocation property exists on AccountDetails object? — RIYAJ KHAN
– RIYAJ KHAN, Commented Feb 11, 2020 at 14:27
please add output of console.log(this.state.AccountDetails); — RIYAJ KHAN
– RIYAJ KHAN, Commented Feb 11, 2020 at 14:30
0: {UDId: 1090, RUId: 18, DeskLocation: "asdasdads", DateAdded: "2020-02-11T14:05:24.100Z"} length: 1 proto: Array(0) — henry pf
– henry pf, Commented Feb 11, 2020 at 14:32
there is only one in the database at the moment but this could be multiple sets of information (all still ruid, desk location and date added) — henry pf
– henry pf, Commented Feb 11, 2020 at 14:33

KnxPwr · Accepted Answer · 2020-02-11 14:42:00Z

2

Inside the render I would do something like this

render() {


return (
{this.state.AccountDetails.length > 0 ?
      <ul>
        <Link to="/profile">
          <button style={{ float: "left" }} className="btn btn-secondary">
            Account Details
          </button>
        </Link>
        <button
          style={{ float: "left" }}
          className="btn btn-secondary"
          disabled
        >
          Manage Workstations
        </button>

        <DisplayAddWorkstation />

        <br />
        <br />

        {this.state.AccountDetails &&
          this.state.AccountDetails.map(function(AccountDetails, index) {
            return (
              <WorkStations AccountDetails={AccountDetails}></WorkStations>
            );
          })}
      </ul> : <>this is what I want</>}
)

Since you are initializing the array as empty you should just check if this.state.AccountDetails.length > 0 Also be careful, you cannot check this.state.AccountDetails.DeskLocationlike that since your output is an array of objects and not an object itself.

answered Feb 11, 2020 at 14:42

KnxPwr

564 bronze badges

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

1 Comment

henry pf Over a year ago

My man I fixed this with something very similar I just used a if statement. But to anyone reading this in future this is the way I did it essentially.

RIYAJ KHAN · Accepted Answer · 2020-02-11 14:40:52Z

0

From shared sample output,

AccountDetails is an array.You should check like this.

 const { AccountDetails  } = this.state;


 if(AccountDetails.length === 0 ){
  return(<>this is what I want</>
 }

return AccountDetails.length > 0 && (
          <ul>
            ......
            {
              AccountDetails.map(function(AccountDetails, index) {
                return (
                  <WorkStations AccountDetails={AccountDetails}></WorkStations>
                );
              })}
          </ul>
    )

edited Feb 11, 2020 at 14:40

answered Feb 11, 2020 at 14:35

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

Conditional render for react using state

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related