Using "for" directive in JSX

A easy-to-use "for" directive solution for front-end frameworks using JSX like React.

See Also:

• Using two-way data binding in JSX: babel-plugin-jsx-two-way-binding
• Using if-directive in JSX: babel-plugin-jsx-if-directive

1. Install

npm install --save-dev babel-plugin-jsx-for-directive

2. Basic Usage

Edit your .babelrc file:

{
  "plugins": [
    "jsx-for-directive"
  ]
}

In your jsx file:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            languages: ['JavaScript', 'TypeScript', 'Python', 'Rust', 'Scala']
        }
    }

    render() { return (
        <div>
            <ul>
                <li for={lan in this.state.languages}>{lan}</li>
            </ul>
        </div>
    )}
}

3. Usage with "index"

In your jsx file:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            languages: ['JavaScript', 'TypeScript', 'Python', 'Rust', 'Scala']
        }
    }

    render() { return (
        <div>
            <ul>
                <li
                    for={(lan, index) in this.state.languages}
                    key={index}
                >{lan}</li>
            </ul>
        </div>
    )}
}

4. Usage with custom attribute name

Edit your .babelrc file:

{
  "plugins": [
    "jsx-for-directive", 
    { 
      "attrName": "r-for" 
    }
  ]
}

In your jsx file:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            languages: ['JavaScript', 'TypeScript', 'Python', 'Rust', 'Scala']
        }
    }

    render() { return (
        <div>
            <ul>
                <li r-for={lan in this.state.languages}>{lan}</li>
            </ul>
        </div>
    )}
}