Array not mapping

Question

I have an array and want to display each item. But map funtion does not work.

export default function SearchField() {

const renderResults = () => {
  console.log('array: ', array); // array is consoled
  return array.map(element => {
    console.log('element', element); // nothing is consoled
    return true;
  });
};

  return (
    <div>{renderResults()}</div>
  );
}

Here is my array. It is being consoled. But its elements are not mapping and consoling.

You need a `return` statement in your `renderResults()` function. — Jeremy Harris, Feb 24 '20 at 13:29
You have write return and curly braces in renderResults function — niks, Feb 24 '20 at 13:29
@vytaute that's inside the .map callback, that does not return from the renderResults function — TKoL, Feb 24 '20 at 13:32
@vytaute this return statement is inside your searchResult.map() statement, so this will not do the expected return for this function. You should put the return before searchResult.map(). — Thomas L, Feb 24 '20 at 13:33
Okey, I tried all your suggestions and updated my post again. Please take a look — vytaute, Feb 24 '20 at 13:51

score 0 · Answer 1 · answered Feb 24 '20 at 13:32

export default function SearchField() {
  const [searchResult, setSearchResult] = useState([]);

  const handleSearch = e => {
    setSearchResult(search.elementsFound(e.target.value));
  };

  const renderResults = () => {
      console.log('searchResult', searchResult); // searchResult array is fine here

      // does not work
      searchResult.forEach(element => {
        console.log('element', element);
      });

      // also does not work
      return searchResult.map(item => {
        console.log('res', searchResult);

         return (
          <div>{item.title}</div>
         );
     });
  }

  return (
    <div>
      <input placeholder="search..." onInput={handleSearch} />
      {renderResults()}
    </div>
  );
}

You need to return the results from .map.

score 0 · Answer 2 · answered Feb 24 '20 at 13:32

only you forgot to add curly brackets

  const renderResults = () => {
  console.log('searchResult', searchResult); // searchResult array is fine here

  searchResult.forEach(element => {
    console.log('element', element);
  });

  searchResult.map(item => {
    console.log('res', searchResult);

   return (
     <div>{item.title}</div>
    );
   });
 }

score 0 · Answer 3 · answered Feb 24 '20 at 14:24

0

¿Are you sure it is being consoled? because array isn't log in the console

answered Feb 24 '20 at 14:24

Juan Sebastian Prieto Bustaman

98
7

Well, I am sure. I added a picture btw. And I set my array earlier in the program I just didnt wanted to add uneccessary info to question. But the point is that array is consoled (shown in picture) but its elements are not. Weird, right? – vytaute Feb 24 '20 at 17:28
Jm but actually in the picture it looks you called the variable but not as consoled because the console must say "array: " also since you write this console.log('array: ', array); – Juan Sebastian Prieto Bustaman Feb 24 '20 at 17:32

Array not mapping

3 Answers3