Saving incoming multiple data in list in React.js

Question

I would really appreciate if you could help me with that one. Namely, I have a parent component and it gets new data from a child component. In child component array-data is mapped so incoming data into parent component is not one but multiple. I would like to save it inside the list tags to get as many list items as incoming values from child component.

Here's the code:

import React, { Component } from 'react';
import TextEnter from './TextEnter.jsx';

class Terminal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      incomingData: '',
    };
  }

  updateParent(val) {
    this.setState({
      incomingData: <li> {val} </li> // here I would like to save every incoming mapped data
    });
  }
  render() {
    return (
      <div className="terminal">
        <TextEnter
          afterCommand={this.props.afterCommand}
          triggerParent={(val) => this.updateParent(val)}
        />
        <ul className="listContainer">
          {this.state.incomingData}
        </ul>
      </div>
    );
  }
}

export default Terminal;

jens · Accepted Answer · 2018-03-01 00:34:37Z

1

I don't really like to store React Elements (created with <li> in a jsx file) as state. I'd rather store the list, and leave how it is rendered to the render() function. I would change it to something like:

import React, { Component } from 'react';
import TextEnter from './TextEnter.jsx';

class Terminal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      incomingData: [],
    };
  }

  updateParent(val) {
    this.setState({
      incomingData: this.state.incomingData.concat(val) 
    });
  }
  render() {
    const listItems = this.state.incomingData.map(item => {
      return <li>{ item }</li>
    });

    return (
      <div className="terminal">
        <TextEnter
          afterCommand={this.props.afterCommand}
          triggerParent={this.updateParent}
        />
        <ul className="listContainer">
          {listItems}
        </ul>
      </div>
    );
  }
}

export default Terminal;

Notice that I also pass this.updateParent directly instead of wrapping it in an anonymous function which should give the same result. You'll get a key warning from react, but I don't know what unique identifier you have access to.

answered Mar 1, 2018 at 0:34

jens

2,15512 silver badges17 bronze badges

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

2 Comments

Murakami Over a year ago

For sure this is a one possible correct answer but let's say I would like to have all of my mapping logic inside the child component, I'm just curious is there any possibility like that

jens Over a year ago

When you say 'child component' do you mean TextEnter? If TextEnter actually handles storing the array then that is no problem, you just replace instead of concat and it should work for you. If val is an array then it would work better to just do incomingData: val. I would still leave the <li> stuff in the Terminal render since that is where you are making the list.

Collectives™ on Stack Overflow

Saving incoming multiple data in list in React.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related