Commit aff58867 authored by Martin Fahl's avatar Martin Fahl

adds more components

parent 409910ac
import React, { Component, Fragment } from "react";
import PropTypes from "prop-types";
import { Filter } from "../../presentational/Filter/Filter";
import { Item } from "../Item/Item";
export class InventoryList extends Component {
constructor(props) {
super(props);
this.state = {
filterTerm: "",
products: ["Water", "Bread", "Beer"]
items: ["Water", "Bread", "Beer"]
};
}
......@@ -16,9 +18,17 @@ export class InventoryList extends Component {
render() {
return (
<div>
<h1>HelloWorld!</h1>
</div>
<Fragment>
<Filter
updateFilter={this.updateFilter}
filterTerm={this.state.filterTerm}
/>
{this.state.items
.filter(items => items.includes(this.state.filterTerm))
.map((name, index) => (
<Item key={index} name={name} />
))}
</Fragment>
);
}
}
......
import React, { Component } from "react";
import PropTypes from "prop-types";
export class Item extends Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
}
increment = event => {
this.setState({ counter: this.state.counter + 1 });
};
decrement = event => {
this.setState({
counter:
this.state.counter > 0 ? this.state.counter - 1 : this.state.counter
});
};
render() {
return (
<div className="row">
{this.props.name}
</div>
);
}
}
Item.propTypes = {
name: PropTypes.string.isRequired
};
import React, { Component } from 'react';
import React from 'react';
import { InventoryList } from "../../container/InventoryList/InventoryList.js";
import './App.css';
......
import React from "react";
import PropTypes from "prop-types";
export const Filter = ({ filterTerm, updateFilter }) => (
<div className="row">
<div className="col-md-2">Filter</div>
<div className="col-md-3">
<input type="text" value={filterTerm} onChange={updateFilter} />
</div>
</div>
);
Filter.propTypes = {
filterTerm: PropTypes.string,
updateFilter: PropTypes.func
};
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