How to display the result of Select query on list with ReactJS?

Question

I am new developer ReactJS, I develop a table with ReactJS on the FrontEnd, NodeJS on BackEnd and MySQL about the database.

I want when I click on the view button on Action column, it will be redirected to another page, which display a list containing the result of the Select query, as below :

ViewCLient.js :

class ViewClient extends Component {
    constructor(props) {
        super(props);
        this.state = {
            clients: [],
            Code :1111
        };
        this.toggle = this.toggle.bind(this);
        this.state = {
            activeTab: '1',
        };
    }

    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab,
            });
        }
    }
    componentDidMount(Code) {
        
        axios({
                method: "get",
                url: "/app/viewclient/"+Code  ,
                withCredentials: true,
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "application/json",
                    Accept: "application/json"
                }
            })
            .then(response => {
                if (response && response.data) {
                    this.setState({ clients: response.data });
                }
            })
            .catch(error => console.log(error));
    }

    render() {
        let { clients } = this.state;
       // let { clients } = this.state;
        return (
            <div className="animated fadeIn">
        <Row>
         
           <Col xs="12" md="6" className="mb-4">
            <Nav tabs>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '1' })}
                  onClick={() => { this.toggle('1'); }}
                >
                  <i className="fa fa-info"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Détails</span>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '2' })}
                  onClick={() => { this.toggle('2'); }}
                >
                  <i className="fa fa-credit-card"></i> <span
                  className={this.state.activeTab === '2' ? '' : 'd-none'}> Factures</span>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '3' })}
                  onClick={() => { this.toggle('3'); }}
                >
                  <i className="fa fa-truck"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Bons de livraison</span>
                </NavLink>
              </NavItem>
            </Nav>
            <TabContent activeTab={this.state.activeTab} style={{ height:"420px"}}>
              <TabPane tabId="1">
               <ul>
               {
                       clients &&  clients.map(client => (
                            <li key={client.Code}>
                         <h1> Code client :    {client.Code} </h1>
                             {client.Prenom}
                              {client.Nom}
                              {client.FAX}
                             {client.Telephone}
                               {client.Email}
                                {client.Adresse1}
                                 {client.Adresse2}
               </li>
               ))}
               </ul>
              </TabPane>
              <TabPane tabId="2">
                
              </TabPane>
              <TabPane tabId="3">
              
              </TabPane>
            </TabContent>
          </Col>
          
        </Row>
      </div>
        );
    }
}

export default ViewClient;

ListClient.js

class ListeClients extends Component {


  constructor(props) {
    super(props);
    this.state = {
      clients: []
    };
    this.handleView = this.handleView.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }

  componentDidMount() {
    axios({
        method: "get",
        url: "/app/listeclients/",
        withCredentials: true,
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "application/json",
          Accept: "application/json"
        }
      })
      .then(response => {
        if (response && response.data) {
          this.setState({ clients: response.data });
        }
      })
      .catch(error => console.log(error));
  }

/*handleViewB(Code) {
   this.props.history.push('/clients/viewclient/');
}*/
handleView( evt) {
    try {
      console.log("Voir client")
      this.props.history.push('/clients/viewclient/');
      // Do something that could throw
    }
    catch (error) {
      this.setState({ error });
    }
  }
  handleEdit(event) {
    try {
    console.log("Modifier client")
    this.props.history.push('/clients/editclient/');
    // Do something that could throw
     } catch (error) {
       this.setState({ error });
     }
  }
  // event.preventDefault;





  render() {
    let { clients } = this.state;
     let Code = this.state;
    var btn = {
      backgroundColor: 'Transparent',
      backgroundRepeat: 'no-repeat',
      border: 'none',
      cursor: 'pointer',
      overflow: 'hidden',
      outline: 'none'
    }
    var center = {
      textAlign: "center"
    }
    return (
      <div className="animated fadeIn">
       
          
            <Card style={{ height:"420px"}}>
              <CardHeader>
                <h4>
                  <strong>
                    <i className="fa fa-align-justify" /> Tous les clients
                  </strong>
                </h4>
              </CardHeader>
              <CardBody>
              
                    <Table  bordered responsive size="sm" style={center}>
                      <thead >
                        <tr>
                          <th ><strong>Code</strong></th>
                          <th>Prenom</th>
                          <th>Nom</th>
                          <th>Email</th>
                          <th>Telephone</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        {
                          clients.map(client => (
                            <tr key={client.Code}>
                              <td>{client.Code} </td>
                              <td>{client.Prenom}</td>
                              <td>{client.Nom}</td>
                              <td>{client.Email}</td>
                              <td>{client.Telephone}</td>
                              <td>
                                <button style={btn}   onClick={this.handleView} type="button"><i class="fa fa-eye"></i></button>
                                <button style={btn} onClick={this.handleEdit} type="button"><i class="fa fa-edit"></i></button>
                                <button style={btn}><i class="fa fa-trash-o"></i></button>
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </Table>
              
              </CardBody>
            </Card>
         
        
         
      </div>
    );
  }
}

export default ListeClients;

My router.js :

exports.viewclient = function(req, res) {
  var Code = req.query.Code;
    console.log(req.params);

    connection.query('SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2  FROM clients  WHERE Code = ?',[req.params.Code],  function(error, results, fields) {
        if (error) throw error;
        res.send(JSON.stringify(results));
console.log(results);
    });

}

My server.js :

router.get('/viewclient/:Code', clients.viewclient);

When I run the backend, it works well with Postman, but when I run it with ReactJS, it redirects me to http://localhost:3000/app/viewclient/ but nothing is displayed and the console of the router console.log(req.params) returns { Code: 'undefined' }

How to fix that please ?

Answer 1

The react app by default tries to connect to the url on port 3000. So you would either need to provide the full url with port number on which the server is running (the url which you tried on Postman) to axios, or modify the scripts attribute of package.json to include the server port number.

Also, there the way of implementing componentDidMount in ViewClient.js is incorrect. In componentDidMount(Code), Code will be undefined. If the value of Code will be constant, you can access the value within componentDidMount using the state. So change the same to below:

 componentDidMount() {

    axios({
            method: "get",
            url: "/app/viewclient/"+this.state.Code  ,
            withCredentials: true,
            headers: {
                "Access-Control-Allow-Origin": "*",
                "Content-Type": "application/json",
                Accept: "application/json"
            }
        })
        .then(response => {
            if (response && response.data) {
                this.setState({ clients: response.data });
            }
        })
        .catch(error => console.log(error));
}