diff options
Diffstat (limited to 'src/client')
-rw-r--r-- | src/client/react/App.js | 15 | ||||
-rw-r--r-- | src/client/react/components/presentational/Search.js | 24 | ||||
-rw-r--r-- | src/client/react/index.js | 3 |
3 files changed, 41 insertions, 1 deletions
diff --git a/src/client/react/App.js b/src/client/react/App.js new file mode 100644 index 0000000..b8bb301 --- /dev/null +++ b/src/client/react/App.js @@ -0,0 +1,15 @@ +import React from 'react'; +import Search from './components/presentational/Search'; + +const App = () => ( + <div> + <Search + onInput={() => {}} + results={[ + { type: 's', name: '18561' }, + ]} + /> + </div> +); + +export default App; diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js new file mode 100644 index 0000000..0dde8a6 --- /dev/null +++ b/src/client/react/components/presentational/Search.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Search = ({ onInput, results }) => ( + <div> + <input + onInput={onInput} + placeholder="Zoeken" + /> + <ul> + {results.map(result => <li key={result.name}>{result.name}</li>)} + </ul> + </div> +); + +Search.propTypes = { + onInput: PropTypes.func.isRequired, + results: PropTypes.arrayOf(PropTypes.shape({ + name: PropTypes.string.require, + type: PropTypes.string.require, + })).isRequired, +}; + +export default Search; diff --git a/src/client/react/index.js b/src/client/react/index.js index 7e5f559..bb7a21b 100644 --- a/src/client/react/index.js +++ b/src/client/react/index.js @@ -3,12 +3,13 @@ import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import reducer from './reducers'; +import App from './App'; const store = createStore(reducer); ReactDOM.render( <Provider store={store}> - <div>Hello World!</div> + <App /> </Provider>, document.getElementById('root'), ); |