How do I render single element of array?

Question

In my React app I am having arrays in my variable, and they are rendered as a single element. For example r: ['reply1-1', 'reply1-2'] is rendered as a reply1-1reply1-2, together. I dont know how to <br/> them, or to make separate buttons.

Code:

class App extends Component {
    constructor() {
        super();
        this.state = { currentDialog: 0 }
    }
    render() {
        var dialogs = [
            {
                id: uuid.v4(),
                q: 'dialog1',
                r: ['reply1-1', 'reply1-2']
            },
            {
                id: uuid.v4(),
                q: 'dialog2',
                r: ['reply2-1', 'reply2-2']
            },
            {
                id: uuid.v4(),
                q: 'dialog3',
                r: ['reply3-1', 'reply3-2']
            },
            {
                id: uuid.v4(),
                q: 'dialog4',
                r: ['reply4-1', 'reply4-2']
            }
        ]
        var replyList = dialogs.map(reply => {
            return (
                <div>
                    {reply.r}
                </div>
                );
        });

        return(
            <div className="App">
                {dialogs[this.state.currentDialog].q}
                <br /><br />

                {replyList[this.state.currentDialog]}

                <br /><br />

                <button onClick={() => {
                    this.currentDialogMinus()
                }}>PREV</button>
                <button onClick={() => {
                    this.currentDialogPlus()
                }}>NEXT</button>
            </div>)
    }
    currentDialogPlus() {
        this.setState(
            {
                currentDialog: this.state.currentDialog + 1
            }
        );
    }
    currentDialogMinus() {
        this.setState(
            {
                currentDialog: this.state.currentDialog - 1
            }
        );
    } 

}
export default App;

John H · Accepted Answer · 2018-08-11 10:11:37Z

1

You just need to call map() again to render them separately. Something like:

var replyList = dialogs.map(reply => {
    return (
        <div>
            {reply.r.map(item => {
                <button type="button">{item}</button>
            })}
        </div>
    );
});

answered Aug 11, 2018 at 10:11

John H

14.7k5 gold badges44 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hardik Modha Over a year ago

Just make sure that you don't forget to add key!

user8532173 Over a year ago

@HardikModha Why do I need key?

Hardik Modha Over a year ago

@Przemyslaw.Pszemek react docs will explain it better. reactjs.org/docs/lists-and-keys.html#keys

John H Over a year ago

@HardikModha Thanks very much for that.

user8532173 Over a year ago

@HardikModha thanks, but anyway, before I will continue with my project, I decided to study first amazon.com/Fullstack-React-Complete-ReactJS-Friends/dp/… I am total noob

|

Vasuki Dileep · Accepted Answer · 2018-08-11 12:44:16Z

dialogs is an array and you are doing it right using the map function to iterate each element in dialogs. However, property "r" is also an array. Hence you need to have a map function to this as well. If your intention is just to separate out the values to a new line, you can add a div tag for each value. Something like this.

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      {value}
      </div>
    ); 
  })
 );
});

If you want to create a button for each element from reply.r array, you can do something like this.

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      <button>{value}</button>
      </div>
      ); 
    })
  );
});

You can also reduce verbose by something like this.

var replyList = dialogs.map(reply => {
return (reply.r.map(value => <div><button>{value}</button></div>));
});

But I would recommend having a return statement to make it more readable. Hope this helps.

Collectives™ on Stack Overflow

How do I render single element of array?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related