CODEWITHSUNDEEP
mysqlreactjsexpresssequelize.js
user7956921
user7956921

Reputation:

Execute helper function to display a data - React, Express

I have a helper function that basically select the name of the product based on the product category_id and the id from categories table:

const selectName = function(id){
  sequelize.query(`SELECT c.name FROM categories as c WHERE EXISTS (SELECT 1 FROM product as p WHERE c.id = '${id}')`, { type: sequelize.QueryTypes.SELECT})
    .then(cnames => {
      console.log('cnames via id >>>>>>>', cnames)
    });
};

The code above will return a name if the id passed in is equal to the id of the categories.

And then on my express file I set this up to call it on my react front end:

app.post('/api/selectName', (req, res) => {
  helper.selectName(req.body.category_id);
  res.end();
});

On my react I already set up a function that pulls up the product list w/c includes name, amount, with the category_id inside

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      pdata: [],
    };

    this.selectName= this.selectName.bind(this);
  }

  pullProducts() {
    axios
      .get('/api/products')
      .then(myData => {
        this.setState({
          pdata: myData.data
        });
      })
      .catch(err => console.log(err));
  }


  componentDidMount() {
    this.pullProducts();
  }

I also tried putting the selectName function to call the function I created above:

 selectName(id){
    axios
      .post('/api/selectName', {
        category_id: id
      })
      .then( () => this.pullProducts() )
      .catch(err => console.log(err));
  }

I am expecting that this function will return the name of the category based on category_id passed and and will check for the equivalent id inside the categories and id and return the name.

So inside my productlist component, I passed in this function:

   <TransactionList tdata={this.state.cdata} selectName={this.selectName}/>

And then in the actual component, I tried to call the functin to do a selection:

    <div className="c-data">{this.props.item.pname}</div>
    <div className="c-data">{this.props.item.amount}</div>
   <div className="c-data">{this.selectName(this.props.item.category_id)}</div>

but it just returned an error w/c says: TypeError: this.selectTransactionViaCategoryId is not a function

My Goal: Inside the div where I call the function, I want to return the name of the category w/ equivalent id passed in. If there is no category_id in that row, it must display "NO ID" instead.

How do I accomplish this inside react? What am I doing wrong? How do I do conditional so if there is no category_id in that row, it must display "NO ID"?

Sorry newbie here.

Upvotes: 0

Views: 109

Answers (1)

Hamza El Aoutar
Hamza El Aoutar

Reputation: 5657

Couple of things that may help you do what you want:

  • Inside of TransactionList you should be using this.props.selectName and not this.selectName (unless you have a field in your component called selectName)

  • When doing this : <div className="c-data">{this.selectName(this.props.item.category_id)}</div> you are expecting that your function return the name of a 'category' while it returns undefined.

  • One way to solve this would be to set the state of the parent component to whatever your backend (/api/selectName) returns and pass it down to TransactionList as props and instead of calling selectName inside your render function, call it somewhere else (inside componentDidMount for example)

Upvotes: 0

Related Questions