Permalink
Browse files

Step 3: Scaffold basic GifList and GifItem components with dummy data

  • Loading branch information...
samanthamichele7 committed May 31, 2017
1 parent 7397d5e commit fcc479a3d1038f727f4012c5146ac35298522aaa
Showing with 48 additions and 0 deletions.
  1. +11 −0 src/components/GifItem.js
  2. +14 −0 src/components/GifList.js
  3. +23 −0 src/index.js
@@ -0,0 +1,11 @@
import React from 'react';

const GifItem = (image) => {
return (
<li>
<img src={image.gif.url} />
</li>
)
};

export default GifItem;
@@ -0,0 +1,14 @@
import React from 'react';
import GifItem from './GifItem';

const GifList = (props) => {
const gifItems = props.gifs.map((image) => {
return <GifItem key={image.id} gif={image} />
});

return (
<ul>{gifItems}</ul>
);
};

export default GifList;
@@ -1,8 +1,30 @@
import React from 'react';
import ReactDOM from 'react-dom';
import GifList from './components/GifList';
import SearchBar from './components/SearchBar';

class App extends React.Component {
constructor() {
super();

this.state = {
gifs: [
{
id: 1,
url: 'http://fakeimg.pl/300/'
},
{
id: 2,
url: 'http://fakeimg.pl/300/'
},
{
id: 3,
url: 'http://fakeimg.pl/300/'
}
]
}
}

handleTermChange(term) {
console.log(term);
}
@@ -11,6 +33,7 @@ class App extends React.Component {
return (
<div>
<SearchBar onTermChange={this.handleTermChange} />
<GifList gifs={this.state.gifs} />
</div>
);
}

0 comments on commit fcc479a

Please sign in to comment.