Created
August 13, 2019 21:42
-
-
Save lccarrier/b4a55ae7c9b8fdf5396356f9e42cc175 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState } from "react"; | |
//import any components needed | |
import NumberButton from './NumberButton' | |
//Import your array data to from the provided data file | |
import { numbers } from "../../../data" | |
const Numbers = () => { | |
// STEP 2 - add the imported data to state | |
const [numState, setNumState] = useState(numbers); | |
return ( | |
<div> | |
{ | |
numState.map(x => { | |
return ( | |
<NumberButton number={x} />); | |
}) | |
} | |
</div> | |
); | |
}; | |
export default Numbers; | |
// | |
import React from "react"; | |
import styled from 'styled-components'; | |
const NumberButton = props => { | |
return ( | |
<> | |
{/* Display a button element rendering the data being passed down from the parent container on props */ | |
<StyledButton>{props.number}</StyledButton> | |
} | |
</> | |
); | |
}; | |
export default NumberButton; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment