Commit 404b1a53 authored by Kristian Freeman's avatar Kristian Freeman

Answer key - introducing-hoc

parent b0a5a650
import React from 'react';
import ReactDOM from 'react-dom';
import Basic from './Basic'
import React from "react";
import ReactDOM from "react-dom";
import Basic from "./Basic";
class Application extends React.Component {
state = null
state = null;
componentDidMount() {
var url = 'https://bytesized-training-assets.herokuapp.com/object.json';
var url = "https://bytesized-training-assets.herokuapp.com/object.json";
fetch(url).then(resp => {
resp.json().then(json => this.setState(json));
......@@ -14,11 +14,7 @@ class Application extends React.Component {
}
render() {
// Render the Basic component, passing all of Application's state into
// the component as props. You can do this by using the spread operator
// inside of the component tag:
// <SampleComponent {...this.state} />
return null
return <Basic {...this.state} />;
}
}
......
import React from 'react';
import ReactDOM from 'react-dom';
import React from "react";
import ReactDOM from "react-dom";
// Import omitProps from the 'omitProps' module
import omitProps from "./omitProps";
class Basic extends React.Component {
render() {
......@@ -9,15 +9,10 @@ class Basic extends React.Component {
<div>
<h1>{this.props.class}</h1>
<h2>{this.props.exercise}</h2>
<h3>{this.props.dataRetrieved && 'Data loaded!'}</h3>
<h3>{this.props.dataRetrieved && "Data loaded!"}</h3>
</div>
);
}
}
// Replace the default export by wrapping the component with omitProps,
// which takes two arguments:
// 1) The name of the component
// 2) An array of keys that correspond to the keys you want to omit from props.
// Try omitting 'dataRetrieved'.
export default Basic;
export default omitProps(Basic, ["dataRetrieved"]);
import React from 'react';
import _ from 'lodash';
import React from "react";
import _ from "lodash";
// Create the omitProps higher order component:
// omitProps should be a function with two arguments,
// PassedComponent and OmitProps.
//
// The function should return a class OmitProps that extends
// React.Component. The class should have a render function that:
// 1) Has a prop variable that is set to the result of _.omit,
// passing in this.props and omitProps as the arguments.
// 2) Renders PassedComponent, passing the entire prop object in as props to the component.
// You can do this by using the spread operator inside of the component tag:
// <SampleComponent {...this.state} />
const omitProps = (PassedComponent, omitProps) => {
return class OmitProps extends React.Component {
render() {
const props = _.omit(this.props, omitProps);
return <PassedComponent {...props} />;
}
};
};
// export the higher component as the default export fo this module.
export default omitProps;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment