Home / Questions / 39291
Accepted
Sergio Romero
Asked: 2020-12-15 20:43:50 +0800 CST 2020-12-15 20:43:50 +0800 CST

call function inside render in React Js(ecma2015)

  • 772

help in React js with ecmaScript 2015 how to call a method inside the render(){} method I get an error Cannot read property 'ss' of undefined(… where is the error ?? I can't call the ss function that I made inside the method 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;

Without the function it works fine for me.

javascript

1 Answers

  1. Best Answer

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

    You are also missing the context of the map function, you can use an arrow function or bind 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 ul tag: 

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

            }
    • 1