React: "Unknown props"?

1

Hey all,

I’ve decided to teach myself React and what not for the data vis projects even though official FCC lessons aren’t out yet. Anyways, I’m working on my recipe box, and currently I’m trying to work out a way to print the list of ingredients (I’m dealing with this bit by bit) Anyways, I’m trying to render a functional component, but when I try to pass in props for the component, the console says that the props are “unknown”. I’ve pasted my code below. I’m extremely confused as to why it says this.

import React from 'react'
import ReactDOM from 'react-dom'
import ReactBootstrap from 'react-bootstrap'
import { ListGroup } from 'react-bootstrap'
import { ListGroupItem } from 'react-bootstrap'

let statelessFunctionalRecipe = (props) => {
  let source = null;
  if(props.image) {
    source = props.image;
  }
  let ingredients = this.props.ingredients.map((item) => {
    return (<ListGroupItem>{this.props.ingredients[item]}</ListGroupItem>)
  });

  return (
    <div>
    <h1 className ="text-center">{this.props.food}</h1>
    <img src={source}/>
    <ListGroup>
        {ingredients}
    </ListGroup>
    </div>
  );
};

class RecipeBox extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    let ingredients = ["Flakes", "Milk", "Butter"];
    let image = "http://assets.simplyrecipes.com/wp-content/forum/uploads/2008/02/baklava-horiz-a-640.jpg"
    return (
      <statelessFunctionalRecipe image={ image } food="Baklava" ingredients={ ingredients } />
    );
  }
}

ReactDOM.render(<RecipeBox />, document.getElementById('render-target'));
2

You can’t use this in functional stateless components.

let ingredients = props.ingredients.map((item) => { // remove 'this'
    return (<ListGroupItem>{props.ingredients[item]}</ListGroupItem>) // remove 'this'
  });
1 Like
3

@PortableStick

I fixed that after I posted this. Even still it does not work. I haven’t got a single clue why.

import React from 'react'
import ReactDOM from 'react-dom'
import ReactBootstrap from 'react-bootstrap'
import { ListGroup } from 'react-bootstrap'
import { ListGroupItem } from 'react-bootstrap'

const statelessFunctionalRecipe = (props) => {
  let source = null;
  if(props.image) {
    source = props.image;
  }
  let ingredients = props.ingredients.map((item) => {
    return (<ListGroupItem>{item}</ListGroupItem>)
  });

  return (
    <div>
    <h1 className ="text-center">{props.food}</h1>
    <img src={source}/>
    <ListGroup>
        {ingredients}
    </ListGroup>
    </div>
  );
};

class RecipeBox extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    let ingredients = ["Flakes", "Milk", "Butter"];
    let image = "http://assets.simplyrecipes.com/wp-content/forum/uploads/2008/02/baklava-horiz-a-640.jpg"
    return (
      <div>
      <statelessFunctionalRecipe image={ image } food="Baklava" ingredients={ ingredients } />
      </div>
    );
  }
};

ReactDOM.render(<RecipeBox />, document.getElementById('render-target'));
4

@PortableStick

It was because my component was not capitalized. Welp.

5