🍺 A "for" directive solution for React.
Not maintainedDO NOT use it on production environment.
A easy-to-use "for" directive solution for front-end frameworks using JSX like React.
See Also:
npm install --save-dev babel-plugin-jsx-for-directive
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>
)}
}
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>
)}
}
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>
)}
}