"This" Is Undefined Inside Map Function Reactjs

this is undefined inside map function Reactjs

Array.prototype.map() takes a second argument to set what this refers to in the mapping function, so pass this as the second argument to preserve the current context:

someList.map(function(item) {
  ...
}, this)

Alternatively, you can use an ES6 arrow function to automatically preserve the current this context:

someList.map((item) => {
  ...
})

React JS: Function undefined when called in .map function

Use ES6 Arrow functions which will help you to up access the this value of the enclosing context

{this.searchResults.map(photo) =>
    return <div className="dataSetBox" key={photo.toString()}><img id={id} src={photo} onClick={this.imageClick} alt="Image" height="350" width="450" margin="15px" border= "10"/></div>        
)}

React: this is undefined inside a component function

ES6 React.Component doesn't auto bind methods to itself. You need to bind them yourself in constructor. Like this:

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

method/function undefined inside map in react js

getMeSomething needs to be defined inside the class to use it with this.

    class xyz extends React.Component {
  constructor(props) {
      super(props);
      this.getMeSomething = this.getMeSomething.bind(this)
  }

  getMeSomething(event){}

  render() {
    return (
      <div style={{ ...}}>
            {
            this.props.cars.map((car) => {
              return (
                <div>
                  <span className="yhn">
                    <label><input type="checkbox" onChange={this.getMeSomething} />
                    </label>
                    {car}
                  </span>
                </div>
                )
              })
            }
      </div>
    );
  }
}

If you want getMeSomething to be outside the class, then another way is to pass it as props. Avoid attaching it to the global window object.

Also this is implicitly available within getMeSomething and so are props.

React - Cannot access state variable inside map function

Change the anonymous function in your map to an arrow function like this. Change from this:

map(function () {
  console.log(this.state)
  return ...
})

to this:

map(() => {
  console.log(this.state)
  return ...
})

React map() showing undefined

There can be 2 issues.

1. Please cross check the type of blogs, it should be array as map method works only on array.

2. You have to check for array's length before mapping it. As map method doesn't works on empty array.
   
   Try this code --

    <div>
        <h1>{blogs && blogs.length > 0 ? blogs.map(blog => (
            <span>{blog.id}</span>
        )) : null}</h1>
    </div>
   

Getting error Cannot read property 'map' of undefined while using map function in ReactJs

You have the slides inside your class component so you don't need to get the slides from props.
You can access the slides without any medium. something like this:

{this.slides.map((slide, index) => (<TheSLiderElement/>)}

this' keyword is undefined inside Mapping Statement (React)

Event handler props are expected to be passed a function. Currently you are trying to pass the return values of this.play() and this.pause() as event handlers, which wouldn't work anyway.

Also React doesn't make the element available to the event handler via this, but you can access it via event.target:

<video
  poster="https://i.imgur.com/Us5ckqm.jpg"
  onMouseOver={event => event.target.play()}
  onMouseOut={event => event.target.pause()}
  src={`${vid.videos.tiny.url}#t=1`} >
</video>

ReactJs json map returning undefined after loading

I think the problem is with the way fetch api's promise is handled. .then((results) => console.log(results)) seems to return undefined and the following .then is receiving data as undefined. Please try like below and let me know if it works!

    import React, { useState, useEffect } from "react";

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [trendingMovies, setTrendingMovies] = useState();

  useEffect(() => {
    fetch(
      "https://api.themoviedb.org/3/trending/all/day?api_key=***"
    )
      .then((res) => res.json())
      .then((data) => setTrendingMovies(data.results))
      .catch((error) => console.log(error))
      .then(setIsLoading(false));
  }, []);

  function Loading() {
    return <h1>Loading...</h1>;
  }

  function DisplayTrendingMovies() {
    return (
      <>
        <p>Trending:</p>
        {console.log(trendingMovies)}
        <ul>
          {trendingMovies &&
            trendingMovies.map((movie) => (
              <li key={movie.name}>{movie.original_title}</li>
            ))}
        </ul>
      </>
    );
  }

  return <>{isLoading ? Loading() : DisplayTrendingMovies()}</>;
}

export default App;

---

Related Topics