30:[] 2e:{"title":"w3c React.props","cells":[{"id":178,"value":"md` # w3c React.props\n\n\n[❮ Previous](https://www.w3schools.com/react/react_components.asp)[Next ❯](https://www.w3schools.com/react/react_state.asp)\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof option1 = DOM.select(none_doc)","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"{\n const doc = md`\n\n\nProps are arguments passed into React components.\n\nProps are passed to components via HTML attributes.\n\n\n\n## React Props\n\nReact Props are like function arguments in JavaScript *and* attributes in HTML.\n\nTo send props into a component, use the same syntax as HTML attributes:\n\n### Example\n\nAdd a \"brand\" attribute to the Car element:\n\n\\`\\`\\`jsx\nconst myelement = ;\n\\`\\`\\`\n\n\n\nThe component receives the argument as a \\`props\\` object:\n\n### Example\n\nUse the brand attribute in the component:\n\n\\`\\`\\`jsx\nclass Car extends React.Component {\n render() {\n return

I am a {this.props.brand}!

;\n }\n}\n\\`\\`\\`\n`;\n return hide_display(option1, doc);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"{\n const elem = html`

`;\n \n class Car extends React.Component { // without constructor\n render() {\n return htm`

I am a ${this.props.brand}!

`;\n }\n }\n \n const myelement = htm`<${Car} brand=\"Ford\"/>`;\n \n ReactDOM.render(myelement, elem);\n \n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`## Pass Data\n\nProps are also how you pass data from one component to another, as parameters.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"viewof option2 = DOM.select(none_doc)","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"{\n const doc = md`\n\n\n### Example 1\n\nSend the \"brand\" property from the Garage component to the Car component:\n\n\\`\\`\\`jsx\nclass Car extends React.Component {\n render() {\n return

I am a {this.props.brand}!

;\n }\n}\n\nclass Garage extends React.Component {\n render() {\n return (\n

Who lives in my garage?

\n \n

\n );\n }\n}\n\nReactDOM.render(, document.getElementById('root'));\n\\`\\`\\`\n\n`;\n return hide_display(option2, doc)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"{\n const root = html`

`;\n\n \n class Car extends React.Component {\n render() {\n return htm`

I am a ${this.props.brand}!

`;\n }\n }\n\n class Garage extends React.Component {\n render() { // pass data from Garage to Car\n return htm`\n

Who lives in my garage?

\n <${Car} brand=\"Ford\" /> \n

\n `;\n }\n }\n\n ReactDOM.render(htm`<${Garage} />`, root);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof option3 = DOM.select(none_doc)","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"{\n const doc = md`\nIf you have a variable to send, and not a string as in the example above, you just put the variable name inside curly brackets:\n\n### Example 2\n\nCreate a variable named \"carname\" and send it to the Car component:\n\n\\`\\`\\`jsx\nclass Car extends React.Component {\n render() {\n return

I am a {this.props.brand}!

;\n }\n}\n\nclass Garage extends React.Component {\n render() {\n const carname = \"Ford\";\n return (\n

Who lives in my garage?

\n \n

\n );\n }\n}\n\nReactDOM.render(, document.getElementById('root'));\n\\`\\`\\`\n\n\n\n`;\n return hide_display(option3, doc);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"{\n const root = html`

`;\n \n class Car extends React.Component {\n render() {\n return htm`

I am a ${this.props.brand}!

`;\n }\n }\n\n class Garage extends React.Component {\n\n render() {\n const brandName = \"Ford\"; // must be defined inside render()\n return htm`\n

Who lives in my garage?

\n <${Car} brand=${brandName} />\n

\n `;\n }\n }\n\n ReactDOM.render(htm`<${Garage} />`, root);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md `\n\n\n\nOr if it was an object:\n\n### Example\n\nCreate an object named \"carinfo\" and send it to the Car component:\n\n\\`\\`\\`jsx\nclass Car extends React.Component {\n render() {\n return

I am a {this.props.brand.model}!

;\n }\n}\n\nclass Garage extends React.Component {\n render() {\n const carinfo = {name: \"Ford\", model: \"Mustang\"};\n return (\n

Who lives in my garage?

\n \n

\n );\n }\n}\n\nReactDOM.render(, document.getElementById('root'));\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"{\n const root = html`

`;\n \n class Car extends React.Component {\n render() {\n // return htm`

I am a ${this.props.brand.name}!

`; // brandObj is assigned to this.props.brand\n return htm`

I am a ${this.props.brand}!

`; // brandObj is assigned to this.props.brand\n }\n }\n\n class Garage extends React.Component {\n\n render() {\n const brandObj = {name: \"Ford\"}; // must be defined inside render()\n return htm`\n

Who lives in my garage?

\n \n <${Car} brand=${brandObj.name} /> \n

\n `;\n }\n }\n\n ReactDOM.render(htm`<${Garage} />`, root);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"viewof option4 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"{\n const doc = md `## Props in the Constructor\n\nIf your component has a constructor function, the props should always be passed to the constructor and also to the React.Component via the \\`super()\\` method.\n\n### Example\n\n\\`\\`\\`jsx\nclass Car extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return

I am a Car!

;\n }\n}\n\nReactDOM.render(, document.getElementById('root'));\n\\`\\`\\`\n\n\n\n**Note:** React Props are read-only! You will get an error if you try to change their value.`;\n return hide_display(option4, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"{\n const elem = html`

`;\n \n class Car extends React.Component { // with constructor, passing props is a must\n constructor(props) {\n super(props);\n }\n \n render() {\n return htm`

I am a Car of ${this.props.model}!

`;\n }\n }\n\n ReactDOM.render(htm`<${Car} model=\"Mustang\"/>`, elem);\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"import {htm, React, ReactDOM, none_doc, hide_display} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"md` ---\n\n# Hello, HTM & React\n\nRef. \n\n_Note that [Jed Fox’s React notebook](https://observablehq.com/@j-f1/react) makes this all a lot easier, and sets you up to use the new React hooks architecture!_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"{\n const elem = html`

`;\n ReactDOM.render(htm`<${App} page=\"All\" />`, elem);\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"class App extends React.Component {\n constructor(props) {\n super(props);\n this.state = { todos: [] };\n }\n addTodo() {\n const { todos = [] } = this.state;\n this.setState({ todos: todos.concat(`Item ${todos.length}`) });\n }\n render() {\n const { todos } = this.state;\n const { page } = this.props;\n return htm`\n

\n <${Header} name=\"ToDo's (${page})\" />\n

${todo}

\n \n <${Footer}>footer content here\n

\n `;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"Header = ({ name }) => htm`

${name} List

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"Footer = props => htm`