Is there a way in which I can print this react component once

Question

The code is printing this:

Max :Printing First Paragraph
Max :Printing Second Paragraph
Manu :Printing First Paragraph
Manu :Printing Second Paragraph

But What I want is to be printed is

Max :Printing First Paragraph
Manu :Printing Second Paragraph

//App.js
import React, { Component } from 'react';
import './App.css';
import UserOutput from './User/UserOutput';

class App extends Component {
  state = {
    user: [
      { username: 'Max'},
      { username: 'Manu'},
      { username: 'Stephanie'}
    ],
    otherState: 'some other value'
  };
  render() {
    return (
      <div className="App">
      <UserOutput
      username={this.state.user[0].username}
     />
      <UserOutput
      username={this.state.user[1].username}
      />
      </div>
    );
  }
}

export default App;

//UserOutput.js
import React from 'react';
//import './Person.css';

const UserOutput = (props) => {
    return (
      <div className="UserOutput">
        <p>{props.username} :Printing First Paragraph</p>
        <p>{props.username} :Printing Second Paragraph</p>       
      </div>
    )
};

export default UserOutput;

Does this answer your question? [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Emile Bergeron, Mar 18 '21 at 14:45

John · Answer 1 · 2021-03-18T21:09:44.993

Yes. For this scenario what you should do is map the array. You can see a very good docs here about maps: https://reactjs.org/docs/lists-and-keys.html

return (
  <div className="App">
    {this.state.user.map(userObj => 
      <UserOutput user={userObj} key={userObj} />
    }
  </div>
);

And then for the UserOutput component

const UserOutput = (props) => {
  return (
    <div className="UserOutput">
      <p>{props.user.username} :Printing {props.user.turn}Paragraph</p>
    </div>
  )
};

So for this, I'd add the following to the user array:

user: [
  { username: 'Max', turn: "First"},
  { username: 'Manu', turn: "Second"},
  { username: 'Stephanie', turn: "Third"}
]

This is a quick solution, though. The ideal and most flexible solution for this is to actually map the array indexes to labels that map each number to "First", "Second", "Third" and so on.

Hope this helps.

The `Fragment` isn't necessary. You can put the `key` on the `UserOutput` component. — Emile Bergeron, Mar 18 '21 at 14:36
That is true, I was aiming for something else first and forgot to remove the `Fragment`. Thanks for pointing that out. Edited the answer. — John, Mar 18 '21 at 21:10

score 0 · Answer 2 · answered Mar 18 '21 at 13:32

You could do something like this

import './App.css';
import UserOutput from './User/UserOutput';

class App extends Component {
  state = {
    user: [
      { username: 'Max'},
      { username: 'Manu'},
      { username: 'Stephanie'}
    ],
    otherState: 'some other value'
  };
  render() {
    return (
      <div className="App">
      <UserOutput
      username={this.state.user[0].username}
      number={"first"}
     />
      <UserOutput
      username={this.state.user[1].username}
      number={"second"}
      />
      </div>
    );
  }
}

export default App;

//UserOutput.js
import React from 'react';
//import './Person.css';

const UserOutput = (props) => {
    return (
      <div className="UserOutput">
        <p>{props.username} :Printing {props.number} Paragraph</p>
      </div>
    )
};

export default UserOutput;

score 0 · Answer 3 · answered Mar 18 '21 at 13:35

You should probably do something like this!

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

class App extends Component {
  state = {
    users: [
      { username: 'Max'},
      { username: 'Manu'},
      { username: 'Stephanie'}
    ],
    otherState: 'some other value'
  };
  render() {
    return (
      <div className="App">
          <UserOutput users={this.state.users} />
      </div>
    );
  }
}

export default App;

//UserOutput.js
import React from 'react';
//import './Person.css';

const UserOutput = ({users}) => {
    return (
      <div className="UserOutput">
        <p>{users[0].username} :Printing First Paragraph</p>
        <p>{users[1].username} :Printing Second Paragraph</p>       
      </div>
    )
};

export default UserOutput;

Is there a way in which I can print this react component once

3 Answers3