CODEWITHSUNDEEP
javascriptreactjsreduxreactive-programmingcreateelement
Koala7
Koala7

Reputation: 1404

Create more Elements in React

I need to pass more than 1 element as argument in my function, here it is how I am doing with only 1 element

var first = require('./First’)

How can I pass more elements as argument here? For example with also

var second = require(‘./Second’)

Here the code example

var fs = require('fs')
var React = require('react')
var ReactDOMServer = require('react-dom/server')
var First = require('./First')
var Second = require('./Second')

var build = function(name, props) {

  var svg =  ReactDOMServer.renderToStaticMarkup(React.createElement(First, props))

  fs.writeFileSync('client/data/' + name + '.svg', svg)

}

build(‘my-icon', {})

Upvotes: 1

Views: 543

Answers (1)

Kokovin Vladislav
Kokovin Vladislav

Reputation: 10421

ES5

var fs = require('fs');
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var Manna = require('./Manna');
var Cog = require('./Cog');

var build = function(name, props) {

    var size = props.size || 64;

    var svgProps={
        xmlns:"http://www.w3.org/2000/svg",
        viewBox:[0, 0, size, size].join(' '),
        width:size,
        height:size
    };

    var svg = ReactDOMServer.renderToStaticMarkup(
        React.createElement("svg",svgProps,
        React.createElement(Cog,props),
        React.createElement(Manna,props))
    );

    fs.writeFileSync('client/data/' + name + '.svg', svg);

};

build('manna-icon', {});

ES6 JSX and BABEL

import fs from 'fs';
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import Manna from './Manna';
import Cog from './Manna';

const build = (name="defaultName", props)=> {
    let size = props.size || 64;

    let svgProps={
        xmlns:"http://www.w3.org/2000/svg",
        viewBox:`0 0 ${size} ${size}`,
        width:size,
        height:size
    };

    let svg = renderToStaticMarkup(
    <svg {...svgProps}>
       <Cog {...props}/> 
       <Manna {...props}/>
    </svg>);

    fs.writeFileSync(`client/data/${name}.svg`, svg);
};

build('manna-icon', {});

for jsx and es6 features you need for instance babel-cli

npm install -D babel-cli nodemon

then in package.json

{...
"scripts":{
     "start":"nodemon --exec babel-node server.js"
       }
...
}

video tutorial babel-node | more about jsx

Upvotes: 1

Related Questions