ReactJS Component rendering issue

Question

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>

Any specific areas? If not, your question is off topic and more 'code-review' (which has its own site). — Andrew Li
– Andrew Li, Commented Apr 17, 2018 at 3:33
in each of the function calls, I'm returning each of the corresponding variables, which aggregate into the product function. I have the ReactDOM enabled, but I'm trying to figure out why nothing's being displayed. What am I doing wrong? — Java Drinker
– Java Drinker, Commented Apr 17, 2018 at 3:37
My recommendation would be to revise your question so it centers around the problem of it not rendering, since it just seems like a code review situation to me. Then, I and others would probably be able to go through and see what's wrong. — Andrew Li
– Andrew Li, Commented Apr 17, 2018 at 3:39
The function ReactDOM.render takes in two arguments, the component you want to render, and the corresponding place in HTML you want to render it: ReactDOM.render(<Product />, document.getElementById('my-root-id-here')) — Andrew Li
– Andrew Li, Commented Apr 17, 2018 at 3:40
Also, when passing props, the syntax should be image={prod_img} etc. as the curly braces indicate a JS expression — Andrew Li
– Andrew Li, Commented Apr 17, 2018 at 3:41

Sachi Tekina · Accepted Answer · 2018-04-17 04:04:00Z

1

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

answered Apr 17, 2018 at 4:04

Sachi Tekina

1,8105 gold badges29 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Java Drinker Over a year ago

Yes, this was the answer I came to with Li357, but thank you very much for providing the retrospective. :)

Collectives™ on Stack Overflow

ReactJS Component rendering issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related