React.Js - Part of the DOM does not render

Question

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.

Put the component `All` above `MyApp` you will probably get a reference error otherwise. Also the return of `All` is invalid. If you mean to return two elements use a react fragment. At the moment it's using the comma which only returns the h1 element — evolutionxbox, Aug 09 '21 at 10:35
Does this answer your question? [Return multiple elements inside React.render()](https://stackoverflow.com/questions/34893506/return-multiple-elements-inside-react-render) — evolutionxbox, Aug 09 '21 at 10:44

score 1 · Answer 1 · answered Aug 09 '21 at 10:41

1

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

answered Aug 09 '21 at 10:41

Sinan Yaman

5,714
2
15
35

btw, this question has been asked before https://stackoverflow.com/questions/34893506/return-multiple-elements-inside-react-render – evolutionxbox Aug 09 '21 at 10:44
Cool, you can flag the question as duplicate :D – Sinan Yaman Aug 09 '21 at 10:46
(let's both do that :D ) – evolutionxbox Aug 09 '21 at 10:47
just did :) I believe you don't need to comment this question has been asked before to every answer, the mods will flag the question as duplicate even if it has been only flagged once. – Sinan Yaman Aug 09 '21 at 10:49
1

(ok cool, I just thought I'd let you know) (I'm whispering btw) – evolutionxbox Aug 09 '21 at 10:49

score 0 · Answer 2 · answered Aug 09 '21 at 10:43

0

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>
    )
}

answered Aug 09 '21 at 10:43

Dobrin Tinchev

383
3
10

btw, this question has been asked before https://stackoverflow.com/questions/34893506/return-multiple-elements-inside-react-render – evolutionxbox Aug 09 '21 at 10:44

React.Js - Part of the DOM does not render

2 Answers2