call function behind render in React Js (ecma2015)

Question

call function behind render in React Js (ecma2015)

Navigation

#1 by (1 votes)

0

help in React js with ecmaScript 2015 how to call a method within the method render () {} I get an error Can not read property 'ss' of undefined (... where this error ?? I can not call the function ss that I did within the render () method: (

import React from 'react'

      class Saludo extends React.Component {
        constructor(){
         super();
         this.state={lista:[]};
        }


        componentWillMount() {
            fetch('http://localhost/viaLacteaQuery.php')
              .then((response) => {
                return response.json();
              })
              .then((data) => {
                   this.setState({lista:data.data.records});
              })
          }


         ss(){
          return  Math.random();
        }


        render() {
            return (
              <div>
                <h1>Saluditos!!</h1>

                {
                  this.state.lista.map(function(item) {
                    <ul>
                     return (
                       <ul>
                       <li key={this.ss()}>{item.nombre}</li>
                       <li key={this.ss()}>{item.cuenta}</li>
                       <li key={this.ss()}>{item.precio}</li>
                       </ul>
                     )
                  </ul>
                  })

                }

              </div>


          )
        }
      }

      export default Saludo;

without the function works well.

javascript ecmascript-2015 reactjs

asked by Sergio Romero 15.12.2016 в 05:43

source

1 answer

Copy values from a DataGridView to a new DataTable in order to be compared Filling gridview with stored procedure

score 1 · Accepted Answer

You have to delete the tag before returning or if you need the tag you put it in the return.

You also lack the context of the map function, you can use an arrow function or bin the context to the function:

Without the ul tag:

            {
                this.state.lista.map((item) => {
                        return (
                        <ul>
                            <li key={this.ss()}>{item.nombre}</li>
                            <li key={this.ss()}>{item.cuenta}</li>
                            <li key={this.ss()}>{item.precio}</li>
                        </ul>
                        )
                })

            }

            {
                this.state.lista.map((function (item) {
                        return (
                        <ul>
                            <li key={this.ss()}>{item.nombre}</li>
                            <li key={this.ss()}>{item.cuenta}</li>
                            <li key={this.ss()}>{item.precio}</li>
                        </ul>
                        )
                }).bind(this))

            }

With the label ul:

            {
                this.state.lista.map((item) => {
                    return (
                        <ul>
                            <ul>
                                <li key={this.ss()}>{item.nombre}</li>
                                <li key={this.ss()}>{item.cuenta}</li>
                                <li key={this.ss()}>{item.precio}</li>
                            </ul>
                        </ul>
                    )
                })

            }

            {
                this.state.lista.map((function (item) {
                    return (
                        <ul>
                            <ul>
                                <li key={this.ss()}>{item.nombre}</li>
                                <li key={this.ss()}>{item.cuenta}</li>
                                <li key={this.ss()}>{item.precio}</li>
                            </ul>
                        </ul>
                    )
                }).bind(this))

            }