CODEWITHSUNDEEP
reactjsswitch-statementconditional-statementsrendering
Adam
Adam

Reputation: 395

React conditional rendering - Why doesn't this code render anything?

I have a panel that should render list of options based on the type of query it gets through props. The query type is recognised OK but then it should map through the state and render a list of elements. But it renders nothing at all. Why is that? Thanks! 

export default class SortSearchFilterPanel extends Component {
  constructor(props) {
    super(props);
    this.type = this.props.type;
    this.state = {
      sortList: [
        "What's New",
        "Name A-Z",
        "Name Z-A",
        "ABV Low To High",
        "ABV High To Low",
        "Price Low To High",
        "Price High To Low"
      ],
      filterList: ["Filter By Name", "Filter By Price"]
    };
  }

  render() {
    const { type } = this.props.type;
    const { sortList, filterList } = this.state;
    switch (type) {
      case "search":
        return (
          <div className="PanelGrid">
            <input type="text" name="serch" placeholder="Search..." />
          </div>
        );
        break;
      case "sort":
        return (
          <div className="PanelGrid">
            <ul className="PanelList">{sortList.map(item => <li key={item}>item</li>)}
            </ul>
          </div>
        );
        break;
      case "filter":
        return (
          <div className="PanelGrid">
            <ul className="PanelList">
              {filterList.map(item => <li key={item}>item</li>)}
            </ul>
          </div>
        );
        break;
      default:
        return null;
        break;
    }
  }
}

Upvotes: 0

Views: 35

Answers (1)

Carlos Saiz Orteu
Carlos Saiz Orteu

Reputation: 1805

I believe your problem is in the declaration of type prop:

You'got this:

const { type } = this.props.type;

It should be this:

const { type } = this.props;

Upvotes: 1

Related Questions