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;

Answer 1

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.

Answer 2

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