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;