Cleaner react code when using loops and map

Question

I have this code working with react, and its just getting very cluttered, so I was wondering if there is a way to make this code and others that are quite similar to look cleaner.

render() {
    let result = null;
    var obj = this.state.welcome;
    let test = null;

    if (this.state.isReal) {
      test = Object.entries(obj).map(([key, value], index) => {
        return (
          <li key={index}>
            Word: "{key}" repeats: {value} times
          </li>
        );
      });
      result = (
        <Aux>
          <h3>Title</h3>
          <ul>{test}</ul>
        </Aux>
      );
    }
    return (
      <Aux>
        <div className="bframe">
          <div className="form" />
          {result}
        </div>
        <Footer />
      </Aux>
    );
  }

I was wondering if its possible to move everything before 'return' statement, preferable in a separate file. I tried making a functional component and passing props but im unable to do loops there. Any tips?

You should avoid using index as a key. In your case use key instead. See: medium.com/@robinpokorny/… — Marko Dumic
– Marko Dumic, Commented Jan 29, 2019 at 12:46

Treycos · Accepted Answer · 2019-01-29 12:34:54Z

You can reduce your code to the following :

render() {
    const { welcome, isReal } = this.state

    return (
        <Aux>
            <div className="bframe">
                <div className="form" />
                {isReal && 
                    <Aux>
                        <h3>Title</h3>
                        <ul>
                            {Object.entries(welcome).map(([key, value]) => 
                                <li key={key}>
                                    Word: "{key}" repeats: {value} times
                                </li>
                            )}
                        </ul>
                    </Aux>
                }
            </div>
            <Footer />
        </Aux>
    );
}

Do not use var, by default use const and if you want to modify your variable, use let.

You can choose to render an element or not by using the inline if : &&.

Your function is also unnecessary as it can be replaced by inline JS.

Your map can also be reduce from : x.map(a => { return <div/> } to x.map(a => <div/>.

You can also use the key of each item as the React key since they all have to be unique anyway in your object.

Gabriele Petrioli · Accepted Answer · 2019-01-29 12:32:39Z

1

Maybe something like the following

const Result = ({real, welcome}) => {
  if (!real) return null;
  
  const words = Object.entries(welcome).map(([key, value], index) => <li key={index}>
            Word: "{key}" repeats: {value} times
          </li>
        );
      
  return (
    <Aux>
      <h3>Title</h3>
      <ul>{words}</ul>
    </Aux>
  );
}

class YourComponent extends React.Component {
 // ...
  render() {
    const {isReal, welcome} = this.state;

    return (
      <Aux>
        <div className="bframe">
          <div className="form" />
          <Result real={isReal} welcome={welcome}/>
        </div>
        <Footer />
      </Aux>
    );
  }
}

answered Jan 29, 2019 at 12:32

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Collectives™ on Stack Overflow

Cleaner react code when using loops and map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related