CODEWITHSUNDEEP
javascriptreactjs
Dawn17
Dawn17

Reputation: 8297

rendering state elements in React

I have a state called changedFields which is a list that contains the changed field when editing data.

        <Dialog
          open={this.state.isDialogOpen}
          onClose={this.handleClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle 
            id="responsive-dialog-title"
          >
            {'ARE YOU SURE YOU WISH TO MAKE THESE CHANGES?'}
          </DialogTitle>
          <DialogContent>
            <DialogContentText>
              <td style={{ 'font-weight': 'bold', 'border-bottom': '0px', 'margin-right': '2em' }}>You changed:</td>
              <td>
                <tr>{this.state.changedFields}</tr>
              </td>

            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              DISCARD CHANGES
            </Button>
            <Button onClick={this.handleClose} color="primary" autoFocus>
              YES, KEEP CHANGES
            </Button>
          </DialogActions>
        </Dialog>

I wrote the dialog this way. This looks like:

enter image description here

I am trying to put each element description, trelloURL, and slackChannel in different rows, but this just puts every elements in one line without a space.

How do I have to render it if I want to put them in different rows?

Upvotes: 1

Views: 55

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074108

Currently, you're just doing this:

<tr>{this.state.changedFields}</tr>

...which will use React's default "convert this array to string" and just output the elements one after another.

class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      changedFields: [
        "description",
        "trelloUrl",
        "slackChannel"
      ]
    };
  }
  render() {
    return (
      <table>
        <tbody>
          <tr>{this.state.changedFields}</tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

You need to do something to create the line breaks you want; perhaps separate rows:

One option is to put them each in their own row:

{this.state.changedFields.map(field => <tr><td>{field}</td></tr>)}


class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      changedFields: [
        "description",
        "trelloUrl",
        "slackChannel"
      ]
    };
  }
  render() {
    return (
      <table>
        <tbody>
              {this.state.changedFields.map(field => <tr><td>{field}</td></tr>)}
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Or if appropriate, put it in one td using multiple divs since they default to display: block (or any other element and set its styling appropriately):

<tr><td>{this.state.changedFields.map(field => <div>{field}</div>)}</td></tr>


class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      changedFields: [
        "description",
        "trelloUrl",
        "slackChannel"
      ]
    };
  }
  render() {
    return (
      <table>
        <tbody>
          <tr>
            <td>{this.state.changedFields.map(field => <div>{field}</div>)}</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

You've now said you want them next to You changed, not in different rows. That's even simpler: Just put them in the same td:

<td style={{ 'font-weight': 'bold', 'border-bottom': '0px', 'padding-right': '2em' }}>You changed:</td>
<td>{this.state.changedFields.join(" ")}</td>


class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      changedFields: [
        "description",
        "trelloUrl",
        "slackChannel"
      ]
    };
  }
  render() {
    return (
      <table>
        <tbody>
          <tr>
            <td style={{ 'font-weight': 'bold', 'border-bottom': '0px', 'padding-right': '2em' }}>You changed:</td>
            <td>{this.state.changedFields.join(" ")}</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Side note: Strongly recommend using a class or similar and CSS, rather than inline stylings.

Upvotes: 1

Related Questions