CODEWITHSUNDEEP
javascriptreactjs
leoOrion
leoOrion

Reputation: 1957

Starting with React

I am trying to learn React. I am using the React docs itself to learn. So I was trying to render a Component called Comment on the screen. But nothing is getting rendered. I am not getting any error either.

I am using the template provided by the documentation itself called create-react-app to get a default react app and then I replaced the default App component with the Comment Component in ReactDom.render(). Is there something else that I am supposed to be doing?

What am I doing wrong here??

These is my code:

index.html:

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>

  </body>
</html>

My js file

import React from 'react';
import ReactDOM from 'react-dom';

function Comment(props) {
    return (
        <div className="Comment">
            <div className="UserInfo">
                <img
                    src={props.author.imgUrl}
                    alt={props.author.name}
                />
                <div className="UserInfo-name">
                    {props.author.name}
                </div>
            </div>
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="Comment-date">
                {props.date}
            </div>
        </div>
    );
}

const comment = {
    date: new Date(),
    text: 'I hope you enjoy learning React!',
    author: {
        name: 'Hello Kitty',
        imgUrl: 'http://placekitten.com/g/64/64'
    }
};

ReactDOM.render(
    <Comment
        author={comment.author}
        text={comment.text}
        date={comment.date}
    />,
  document.getElementById('root')
);

Upvotes: 0

Views: 88

Answers (1)

thedayturns
thedayturns

Reputation: 10823

This appears to fix your problem:

function Comment(props) {
    return (
        <div className="Comment">
            <div className="UserInfo">
                <img
                    src={props.author.imgUrl}
                    alt={props.author.name}
                />
                <div className="UserInfo-name">
                    {props.author.name}
                </div>
            </div>
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="Comment-date">
                {props.date.toString()}
            </div>
        </div>
    );
}

const comment = {
    date: new Date(),
    text: 'I hope you enjoy learning React!',
    author: {
        name: 'Hello Kitty',
        imgUrl: 'http://placekitten.com/g/64/64'
    }
};

ReactDOM.render(
    <Comment
        author={comment.author}
        text={comment.text}
        date={comment.date}
    />,
  document.getElementById('root')
);

All I did was turn the date object into a string in the Comment function.

Upvotes: 1

Related Questions