const KissComponent = (props) => {
    return <div>{props.name}</div>
}


<KissComponente
   name="Elliot"
/>

<KissComponente
   name="Elliot"
/>

<KissComponente
   name="Warren"
/>

const ComponetToShow = ({ firstName, lastName }) => {
    return (
        <div
            style={{
                backgroundColor: '#333',
                color: '#fff',
            }}
        >
            <h2>{firstName}</h2>
            <h3>{lastName}</h3>
        </div>
    )
}

export default ComponentToShow;

class ComponentLogic extends React.Component {
 componentDidMount() {
    featch(URL)
        .then(respponse => response.data.json())
        .then(data => {
            const {
                firstName,
                lastName,
            } = data;
            this.setState({
                firstName,
                lastName,
            });
        });
 }

 render() {
    return (
        <ComponetToShow
            firstName={this.state.firstName}
            lastName={this.state.lastName}
        />
    )
   }
}

export default ComponentLogic;