Injected Javascript in ReactJS File Not Rendering

Question

In the render of the SearchBar class, I can't get the unordered list with the injected Javascript to show in the browser. Is there an error in the method, or is there something more I have to do to get injected Javascript to appear?

import React from 'react';
import './searchbar.css';

const sortByOptions = {
  "Best Match": "best_match",
  "Highest Rated": "rating",
  "Most Reviewed": "review_count"
}

class SearchBar extends React.Component {
    renderSortByOptions() {
  return Object.keys(sortByOptions).map(sortByOption => {
    const sortByOptionValue = sortByOptions[sortByOption];
  });
}
  render() {
   return (
     <div className="SearchBar">
       <div className="SearchBar-sort-options">
         <ul>
           {this.renderSortByOptions()}
         </ul>
       </div>
       <div className="SearchBar-fields">
         <input placeholder="Search Businesses" onChange={this.handleTermChange} />
         <input placeholder="Where?" onChange={this.handleLocationChange} />
       </div>
       <div className="SearchBar-submit">
         <a>Let&#39;s Go</a>
       </div>
     </div>
   )
 }
}

export default SearchBar;

Rick van Lieshout · Accepted Answer · 2018-04-15 19:47:08Z

1

You have to return inside your map statement like so:

 renderSortByOptions() {
   return Object.keys(sortByOptions).map(sortByOption => {
     return sortByOptions[sortByOption];
   });
 }

Alternatively you could keep your variable assignment and return that instead:

renderSortByOptions() {
  return Object.keys(sortByOptions).map(sortByOption => {
    const sortByOptionValue = sortByOptions[sortByOption];
    return sortByOptionValue;
  });
}

Note that this is plain Javascript functionality and will work regardless of framework :)

answered Apr 15, 2018 at 19:47

Rick van Lieshout

2,3162 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jeff Clanton Over a year ago

That got it to appear. It's not showing up the way that I expected though. At least it's showing now. I'll have to look for why it's displaying incorrectly. Thank you for your answer.

Rick van Lieshout Over a year ago

No problem Jeff! If you can't figure out how to do it consider asking a new question with some more code and an explanation of what you want. People will usually help pretty quickly :) PS, if my answer did answer your question you should "accept" it, this way others will know you don't need the help anymore and won't waste their time writing an additional answer.

Rick van Lieshout Over a year ago

Oh yeah, it will also help others with a similar problem know which answer is correct :)

Rick van Lieshout Over a year ago

No problem, we were all new once! Simply click the checkmark on the top left of my answer.

Jeff Clanton · Accepted Answer · 2018-04-15 20:12:55Z

I found the fix by adding a return statement after the renderSortByOptions() method.

 import React from 'react';
import './searchbar.css';

const sortByOptions = {
  "Best Match": "best_match",
  "Highest Rated": "rating",
  "Most Reviewed": "review_count"
}

class SearchBar extends React.Component {
    renderSortByOptions() {
  return Object.keys(sortByOptions).map(sortByOption => {
    const sortByOptionValue = sortByOptions[sortByOption];
    return <li

        key= {sortByOptionValue}
       >{sortByOption}</li>;
  });
}
  render() {
   return (
     <div className="SearchBar">
       <div className="SearchBar-sort-options">
         <ul>
           {this.renderSortByOptions()}
         </ul>
       </div>
       <div className="SearchBar-fields">
         <input placeholder="Search Businesses" onChange={this.handleTermChange} />
         <input placeholder="Where?" onChange={this.handleLocationChange} />
       </div>
       <div className="SearchBar-submit">
         <a>Let&#39;s Go</a>
       </div>
     </div>
   )
 }
}

export default SearchBar;

Collectives™ on Stack Overflow

Injected Javascript in ReactJS File Not Rendering

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related