CODEWITHSUNDEEP
javascriptreactjsreact-props
Endemic
Endemic

Reputation: 370

React component printed twice on the screen

My React component named 'Person' prints twice on the screen,once without props & once with props.

//App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person'

class App extends Component {
  render() {
    return (
      <div className="App">
       <h1>Hello I am Arjun</h1>
          <Person>But What's The Language?</Person>
          <Person technology="React" syntax="JSX"/>
      </div>
    );
  }
}

export default App;

//Person.js

import React from 'react'

const person = (props) => {
    return (
        <div>
            <p>{props.children}</p>
            <p>The technology used is {props.technology} & the syntax 
            is {props.syntax}</p>
        </div>
    )
};

export default person

And this is the output :

React Output

How can I solve this problem?

Upvotes: 0

Views: 1614

Answers (3)

devserkan
devserkan

Reputation: 17618

Other answers show you how you should do that and told the main reason. I will try to explain it a little bit more. You are rendering your component twice and you have three lines because of the structure of your component.

First render:

<Person>But What's The Language?</Person>

Here you are rendering the component with a child. Your child here is "But What's The Language?" string. You don't pass any other prop other then child. Your component shape is:

<p>{props.children}</p>
<p>The technology used is {props.technology} & the syntax is {props.syntax}</p>

First line is coming from the children prop. Second line is your paragraph with other props. So, in the first render you don't have those props, hence rendering as empty for technology and syntax.

Your second render:

<Person technology="React" syntax="JSX"/>

Here you don't have any child. It means no <Person>Child</Person> shape but just <Person /> For this render you have other props. Third line is coming from this render with technology and syntax props. Hence you don't have any children prop, first line is empty.

Upvotes: 2

piedra
piedra

Reputation: 1453

You are rendering your component twice, to obtain the desired output you could do something like this:

//App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello I am Arjun</h1>
        <Person technology="React" syntax="JSX">
          But What's The Language?
        </Person>
      </div>
    );
  }
}

export default App;

that way, your component renders its children "But What's The Language?", and receives the technology and syntax properties for the second line.

Upvotes: 0

Sven Tschui
Sven Tschui

Reputation: 1435

The issue is that you in fact render your component twice. You should have only one <Person /> Tag in your App component:

//App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person'

class App extends Component {
  render() {
    return (
      <div className="App">
       <h1>Hello I am Arjun</h1>
          <Person technology="React" syntax="JSX">But What's The Language?</Person>
      </div>
    );
  }
}

export default App;

Upvotes: 0

Related Questions