CODEWITHSUNDEEP
javascriptreactjsdomjsx
JS Member
JS Member

Reputation: 21

React.Js - Part of the DOM does not render

So I on thid days I started studying REACT.JS.

Look at code below:

import React from 'react'
import ReactDOM from 'react-dom'
import './style.css'
const react = {
    imgSrc: 'https://camo.githubusercontent.com/abd19bd0c5030c8d874ed7073f1815d777004451d5967c447386840b80624569/68747470733a2f2f63646e2e61757468302e636f6d2f626c6f672f72656163742d6a732f72656163742e706e67',
    title: "React",
}
const angular = {
    imgSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png',
    title: 'Angular',
}
const MyApp = () => {
    return (
        <div>
            <ul>
                <li>
                    <All imgSrc={react.imgSrc} title={react.title} />
                </li>
                <li>
                    <All imgSrc={angular.imgSrc} title={angular.title} />
                </li>
            </ul>
        </div>
    )
}
const All = (props) => {
    return (
        <img src={props.imgSrc} alt="none" />,
        <h1>{props.title}</h1>
    )
}

ReactDOM.render(
    <MyApp />, document.getElementById('root')
)

So everything working good except 1 thing

Problem:

The img tag does not render.

The Render Result Image

Upvotes: 0

Views: 140

Answers (2)

Dobrin Tinchev
Dobrin Tinchev

Reputation: 391

Fix the render of the All component. The comma operator evaluates from left to right and returns the last statement. You are basically returning only the h1 element. Comma operator (,)

Here is a working example https://jsfiddle.net/vc5dr9y7/

const All = (props) => {
    return (<React.Fragment>
          <img src={props.imgSrc} alt="none" />
          <h1>{props.title}</h1>
        </React.Fragment>
    )
}

Upvotes: 0

Sinan Yaman
Sinan Yaman

Reputation: 5937

You are not returning a single JSX element in your All component. Change to:

const All = (props) => {
    return (
       <div>
        <img src={props.imgSrc} alt="none" />
        <h1>{props.title}</h1>
       </div>
    )
}

or you can use <> and </> instead of div, which stands for React Fragment

Upvotes: 1

Related Questions