want to create a function in react that creates recipe components when supplied with an array of instructions and another parameter as name of recipe

user_17073004 0
Viewed 33

I am reading "Learning React" by O'Reilly. In this they have stated that we can create components by making a function called "component creating function" and in this function we can supply the required parameters as second parameter to React.createElement function. I did the same but I am getting no output. What is the best way to create such a components creating function?

var a = ['warm water', 'put egg to boil', 'boil finishes', 'scrape off shell'],
  b = 'making eggs',
  recipeArray = [],
  name

function recipeWriter() {
  return React.createElement(
    'section', {
      className: 'recipe'
    },
    React.createElement('h3', {
      className: 'recipeName',
      key: 0
    }, name),
    recipeArray.map((i, j) =>
      React.createElement('li', {
        key: j
      }, i)
    )
  )
}

let el = ReactDOM.render(
  React.createElement(recipeWriter, {
    recipeArray: a,
    name: b
  }, null), document.getElementById('root'))
#root {
  background-color: cornsilk;
  font: bold 1em monospace
}

.recipe {
  background-color: aqua;
  margin: 30px;
}

.recipeName {
  font: 2em monospace;
  color: red;
}

.steps {
  color: darkgreen
}
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

I want my output like this ->

var recipeArray = ['warm water', 'put egg to boil', 'boil finishes', 'scrape off shell'],
  name = 'making eggs'

function recipeWriter() {
  return React.createElement(
    'section', {
      className: 'recipe'
    },
    React.createElement('h3', {
      className: 'recipeName',
      key: 0
    }, name),
    recipeArray.map((i, j) =>
      React.createElement('li', {
        key: j
      }, i)
    )
  )
}

let el = ReactDOM.render(
  React.createElement(recipeWriter, null, null), document.getElementById('root'))
#root {
  background-color: cornsilk;
  font: bold 1em monospace
}

.recipe {
  background-color: aqua;
  margin: 30px;
}

.recipeName {
  font: 2em monospace;
  color: red;
}

.steps {
  color: darkgreen
}
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

reactjs javascript
1 Answers

Your missing the variables from the prop which are passed to your recipeWriter component.

function recipeWriter(props) {
   const recipeArray = props.recipeArray;
   const name = props.name
}

Or more simply written using destructuring

function recipeWriter({ recipeArray, name }) {
}

Also you can remove the recipeArray and name from the top of your file as they are available in the component

Whenever you call React.createElement the 2nd parameter is the props. For instance in your code:

React.createElement(recipeWriter, {
    recipeArray: a,
    name: b
  }, null)

Here you are passing the recipeArray and name to your component. Those props are accessible using the 1st parameter of your functional component.

See documentation for React.createElement and documentation for a functional component

user_18928020
Related