learning react and JSX

Question

Hi guys i am currently learning the React library and JSX but im stuck bc i dont understand what they want me to do here. You guys are my last solution: here is the code ... Use .renderSortByOptions() to sort the businesses by their options (If your wondering what im doing : i am currently trying to make something like Yelp using their API).. i know this site is not for debugging and i usually never ask for stuff like this here but i wanna keep learning and beeing stuck for so long is very demotivating

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 =>{
      let sortByOptionValue = sortByOptions[sortByOption];
      return <li key=sortByOptionValue ></li>;
    }
  });

  render(){
    return(
      <div className="SearchBar">
  <div className="SearchBar-sort-options">
    <ul>
      <!-- Use .renderSortByOptions() to sort the businesses by their options -->
    </ul>
  </div>
  <div className="SearchBar-fields">
    <input placeholder="Search Businesses" />
    <input placeholder="Where?" />
  </div>
  <div className="SearchBar-submit">
    <a>Lets Go</a>
  </div>
</div>
    );
  }
  }
}

what do you want the li to display? the values?

Chris
– Chris

2018-01-17 19:12:25 +00:00
Commented Jan 17, 2018 at 19:12 — Chris
– Chris, Commented Jan 17, 2018 at 19:12
Don't you need an = sign after const sortByOptions?

Tvde1
– Tvde1

2018-01-17 19:16:17 +00:00
Commented Jan 17, 2018 at 19:16 — Tvde1
– Tvde1, Commented Jan 17, 2018 at 19:16

casieber · Accepted Answer · 2018-01-17 19:12:47Z

2

They just mean to call renderSortByOptions where that comment is.

Since it is in the middle of other JSX though, you will need to wrap it with curly braces, like {this.renderSortByOptions()}

answered Jan 17, 2018 at 19:12

casieber

7,6222 gold badges23 silver badges35 bronze badges

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

3 Comments

casieber Over a year ago

Also it does look like you are missing a = where the sortByOptions variable is defined. const sortByOptions{ should be const sortByOptions = {

itsolidude Over a year ago

you mean {} bc its regular javascript?

casieber Over a year ago

I mean in order to escape javascript from JSX you have to wrap it in {}.

Shubham Khatri · Accepted Answer · 2018-01-17 19:14:31Z

You need to call it like {this.renderSortByOptions()} and also correct the other syntactical errors. Check this snippet

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 =>{
      let sortByOptionValue = sortByOptions[sortByOption];
      return <li key={sortByOptionValue} >sortByOptionValue</li>;
    })
  };

  render(){
    return(
      <div className="SearchBar">
  <div className="SearchBar-sort-options">
    <ul>
      {this.renderSortByOptions()}
    </ul>
  </div>
  <div className="SearchBar-fields">
    <input placeholder="Search Businesses" />
    <input placeholder="Where?" />
  </div>
  <div className="SearchBar-submit">
    <a>Lets Go</a>
  </div>
</div>
    );
  }
}

ReactDOM.render(<SearchBar/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>

Shruti Singh · Accepted Answer · 2018-01-17 19:26:25Z

This is the working code : you also need to bind the function and also there were few brackets extra.

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 => {
      let sortByOptionValue = sortByOptions[sortByOption];
      return <li key={sortByOptionValue} ></li>
    })
  }

  render(){
    this.renderSortByOptions = this.renderSortByOptions.bind(this);
    return(
      <div className="SearchBar">
          <div className="SearchBar-sort-options">
            <ul>
              {this.renderSortByOptions()}
    </ul>
          </div>
          <div className="SearchBar-fields">
            <input placeholder="Search Businesses" />
            <input placeholder="Where?" />
          </div>
          <div className="SearchBar-submit">
            <a>Lets Go</a>
          </div>
        </div>
    );
  }
  }

check snippet https://codesandbox.io/s/93xp5w1054

synthet1c · Accepted Answer · 2018-01-17 19:30:50Z

There was a lot of errors, You should check your console before asking a question to resolve the syntax issues.

Here is an optimised version where you are passing your sort options to your <SearchBar /> component to make it reusable.

The main issue you had with your question was you needed to execute your method {this.renderSortByOptions()}

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

const app = document.querySelector('#app')
const sortByOptions = {
  'Best Match': 'best_match',
  'Highest Rated': ' rating',
  'Most Reviewed': 'review_count'
}

class SearchBar extends React.Component{
  renderSortByOptions(options) {
    return Object.keys(options).map(
      key => <li key={key}>{options[key]}</li>
    )
  }

  render(){
    return (
      <div className="SearchBar">
        <div className="SearchBar-sort-options">
          <ul>
            {this.renderSortByOptions(this.props.options)}
          </ul>
        </div>
        <div className="SearchBar-fields">
          <input placeholder="Search Businesses" />
          <input placeholder="Where?" />
        </div>
        <div className="SearchBar-submit">
          <a>Lets Go</a>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <SearchBar options={sortByOptions} />,
  app
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<article id="app"></article>

Collectives™ on Stack Overflow

learning react and JSX

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related