CODEWITHSUNDEEP
javascriptreactjs
Java Drinker
Java Drinker

Reputation: 19

ReactJS Component rendering issue

I'm looking to have my webpage look similar to this: Getting a hang on the syntax and conventions of having components can be simple, but as you can imagine, I'm not having a wonderful time. A lot of the code I've written below almost feels like pseudocode, and I'm not sure how closely I'm writing to it being real code.

Are there any red flags you can spot that would help improve this code?

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <div id="app"></div>

    <script type="text/babel">
    const prod_img = 'http://10.104.0.15/care-products.jpg';
    const prod_name = 'Bath and Body Products';
    const prod_description = 'The bath and body category includes all the items you need to take care of your skin and external body surfaces.';

  const ProductImage = (props) => {
        return <img src={props.prod_img} />;
    };

const ProductName = (props) => {
    return <h2>{props.prod_name}</h2>;
};

const ProductDesc = (props) => {
    return <p>{props.prod_description}</p>;
};

const Product = (props) => {
    return (
    <div>
        <ProductImage image={prod_img} />
        <ProductName name={prod_name} />
        <ProductDesc description={prod_description}/>
    </div>
    );

};

ReactDOM.render(<Product />, document.getElementById('app'));
</script>

Upvotes: 1

Views: 462

Answers (1)

Sachi Tekina
Sachi Tekina

Reputation: 1810

The props were called incorrectly. If you have the following components (should be):

 <ProductImage image={prod_img} />
 <ProductName name={prod_name} />
 <ProductDesc description={prod_description}/>

Calling it in component should be like this:

const ProductImage = (props) => {
    return <img src={props.image} />;
};

const ProductName = (props) => {
    return <h2>{props.name}</h2>;
};

const ProductDesc = (props) => {
    return <p>{props.description}</p>;
};

To put it together:

const prod_img = 'http://10.104.0.15/care-products.jpg';
const prod_name = 'Bath and Body Products';
const prod_description = 'The bath and body category includes all the items you need to take care of your skin and external body surfaces.';

const ProductImage = (props) => {
    return <img src={props.image} />;
};

const ProductName = (props) => {
    return <h2>{props.name}</h2>;
};

const ProductDesc = (props) => {
    return <p>{props.description}</p>;
};

const Product = (props) => {

    return <div><ProductImage image={prod_img} /><ProductName name={prod_name} /><ProductDesc description={prod_description}/> </div> 
};



ReactDOM.render(<Product />, document.getElementById('app'));

JSFiddle here

Upvotes: 1

Related Questions