使用create-react-app会使变量超出范围

Question

I'm following a tutorial in O'Reilly's Learning React. I'm trying to build the recipes app that is on page 95 or so.

Because the code in this book bridges React 15 and 16 and who knows what version of Webpack I decided to take their suggestions and build my app using create-react-app.

I've been successful in changing over most of the code to work with cra's structure, but I can't fix the code in this component:

import React from 'react';
import ReactDOM from 'react-dom';

const Instructions = ({ title, steps }) =>
  <section className="instructions">
    <h2>{title}</h2>
    {steps.map}((s, i) =>
      <p key={i}>{s}</p>
    )
  </section>

export default Instructions

The error I get is:

Failed to compile
./src/components/Instructions.js
  Line 10:  'i' is not defined  no-undef
  Line 10:  's' is not defined  no-undef

I've tried explicitly setting those variables using var and disabling the ESLinter by line, but neither works. In addition to solving the problem, I'd like to understand why this worked with Webpack and straight JSX but breaks with create-react-app.

Answer 1

The brackets serves as a escape from JSX to JavaScript. In this case you're closing it in the wrong place. Try:

const Instructions = ({ title, steps }) =>
  <section className="instructions">
  <h2>{title}</h2>
    {steps.map((s, i) =>
      <p key={i}>{s}</p>
    )}
  </section>