Render react Component from Map Object

In reactjs I’m trying to render a component from a Map object. More specifically, on the press of a button I create a new “FormRow” component, and I store it in a javascript Map object for convenience (because I’m gonna to use it later on). Whenever it happens, I want to render the new component just added, but I can’t figure out how to get it from the Map.

I tried to solve my problem in different ways, using:

myMap.forEach(key => {return myMap.get(key)});
myMap.forEach(component=> {return component});
myMap.values()
myMap.entries()
Object.keys(myMap).map(…)

What I didn’t try:

https://stackoverflow.com/a/50183395/9282731 (I don’t understand it clearly…)

Here is my code siplified:

FormComposer.js:

  constructor() {
    super();
    this.state = {
      counter: 0,
      myMap: new myMap()
    };

    this.handleCreateNewRow = this.handleCreateNewRow.bind(this);
  }

  /** It returns a new FormRow. */
  handleCreateNewRow() {
    let cloneState = this.state;
    let newRow = (
      <FormRow // <-- the component that I want to render.
        key={this.state.counter}
        rowNumber={this.state.counter}
      />
    );

    cloneState.myMap.set(cloneState.counter, newRow);
    cloneState.counter++; // increment the counter for rows
    this.setState(cloneState);
  }

  render() {
    return (
      <div className="container-fluid m-3">
        <div className="col col-9  float-left">
          <div className="row">
            <div className="text-left">
              <h1>Form Builder</h1>
            </div>
          </div>

          {/* Here is the problem! It automaticly loads all the row created previously */}
          {this.state.myMap.forEach(value => {
            console.log(value); // check

            // it print me what I want, but it doesn't render it...
            return value;
          })}
        </div>
      </div>
    );
  }

The console.log(value) returns:

{$$typeof: Symbol(react.element), type: ƒ, key: "0", ref: null, props: {…}, …}

which is the output that I expected, but I don’t know why the render() method doesn’t render it. If you change the Map object with an Array, this example works, and the render() method renders to the user what he expects.

Answer

I don’t see any reason to use a Map when you’re using sequential numbers as the key, just an array would make more sense.

But to get all the values from a Map you use its values method:

{this.state.myMap.values()}

Your forEach didn’t work because forEach always returns undefined and doesn’t do anything with the return value from its callback.

Advertisement

Answer