llamar funcion detro de render en React Js(ecma2015)

publicado por: Anonymous

ayuda en React js con ecmaScript 2015
como llamar un metodo dentro del metodo render(){}
obtengo un error Cannot read property ‘ss’ of undefined(…
donde esta el error ?? no puedo llamar a la funcion ss que hice dentro del metodo render() 🙁

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;

sin la funcion me funciona bien.

solución

Tienes que borrar la etiqueta antes de return o si necesitas la etiqueta lo metes dentro del return.

También te falta el contexto de la función del map, puedes utilizar una función arrow o bindear el contexto a la función:

Sin la etiqueta ul:

            {
                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))

            }

Con la etiqueta 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))

            }
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *