What is a better way of outputting data from sql database?

Question

componentDidMount() {
    try{
        /*const decoded = jwt_decode(window.$userToken);
        console.log(decoded);
        this.setState({
            username: decoded.username,
            firstName: decoded.firstName,
            lastName: decoded.lastName,
            jerseyNumber: decoded.jerseyNumber
        });*/
        loadPlayerData().then(response => {
            const data = response.data.data;
            console.log(data);
            const player = data.map(p =>
                <div>
                    {
                        localStorage.username === p.username ? console.log("yes") : console.log("no")
                    }
                    <p className="m-0">
                        {localStorage.username === p.username ? "Name: " + p.firstName + " " : null}
                        {localStorage.username === p.username ? p.lastName : null}

                    </p>
                    <p className="m-0">
                        {localStorage.username === p.username ? "Jersey Number: " + p.jerseyNumber : null}
                    </p>
                    <p className="m-0">
                        {localStorage.username === p.username ? p.height <= 0 ? "No saved height" : "Height: " + p.height + "cm" : null}
                    </p>
                    <p className="m-0">
                        {localStorage.username === p.username ? p.weight <= 0 ? "No saved weight" : "Weight: " + p.weight + "kg" : null}
                    </p>
                    <p className="m-0">
                        {localStorage.username === p.username ? p.isAdmin === 1 ? "Admin: Yes" : "Admin: No" : null}
                    </p>
                    <p className="m-0">
                        {localStorage.username === p.username ? p.isFormer === 1 ? "Former Player: Yes" : "Former Player: No" : null}
                    </p>
                    {localStorage.username === p.username ?  console.log(this.state.username = p.lastName) : null}
                    {localStorage.username === p.username ?  console.log(this.state.username = p.lastName) : null}
                </div>
            );
            this.setState({player})})
            .catch(err => {
                console.log(err);
                throw err})
    }catch (e) {
        console.log(e);
    }
}

This is what I have so far. I would like to be able to use the outputted data also on a different page and I have little to no idea how to do that. I am planning to make an "admin only page" where I can delete users.

Mockup of how I imagine the admin page to look like

As you can see in the mockup, I would like to output the username in there as well.

I am grateful for any help!!

Mhh... why are you writting JSX code in the componentDidMount event? It seems that you're using axios for getting the data from the DB. When the promise is resolved just update the state of the component and in the render method run the map iterator to render all the elements. The initial state should be an empty array so when there is no data nothing gets rendered. — Rodrigo
– Rodrigo, Commented Jan 4, 2020 at 16:52
Yeah sorry new to React and Node in general. Yes, I am using axios. Can you elaborate it more, I didn't quite understand what you told me. — jericoluislua
– jericoluislua, Commented Jan 4, 2020 at 16:59
Typically JSX should be written in render(). componentDidMount() should save state that is later used in render(). Also, I would suggest finding a way to avoid repeating the same boolean condition so often. One way to do that is with an if statement and calling setState(). Then you render directly from the values in state. — Code-Apprentice
– Code-Apprentice, Commented Jan 4, 2020 at 18:00

Rodrigo · Accepted Answer · 2020-01-04 17:26:57Z

1

When getting data and rendering it on a component, normally you get the data to the state and then, when the state is updated, render it.

import React, { Component } from "react";
import axios from "axios";

class MyComponent extends Component {
  constructor() {
    // start with an empty array
    this.state = { players: [] };
  }

  componentDidMount() {
    axios.get("your_db_url.php")
    .then(response => {
      // when the response comes back from the server update the state
      this.setState({players: response.data.data});
    })
    .catch(e => console.log(e)) 
  }

  render() {
    return <div>
      {this.state.players.map(p => {
        // here run all the code to render your elements
        return <div></div>
      })}
    </div>;
  }
}

As I mentioned in the comment, the fact that at start the array is empty, the component won't render anything in it, when the server response gets back with the data, that code will actually render the elements.

Just remember that JSX shouldn't go inside the componentDidMount event.

answered Jan 4, 2020 at 17:26

Rodrigo

1,7261 gold badge16 silver badges33 bronze badges

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

2 Comments

jericoluislua Over a year ago

Hey haven't coded in a while and this thing works a charm! I am trying to make the Profile page be a form where you can update your personal information. Would I be able to put the form in the "this.state.players.map(p => {" part? If not where would the code be?

Rodrigo Over a year ago

Absolutely, you can use controlled components to update the state values from a form and then update your DB as well using an event handler like a submit button or event: reactjs.org/docs/forms.html There are a lot of resources on the subject, just google react controlled components or react controlled forms.

Collectives™ on Stack Overflow

What is a better way of outputting data from sql database?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related