Динамический тег и key?

Question

[SerjAndreev]

Есть ряд тегов которые храняться в сторе, вывожу их в компоненте, требует ключ подскажите пожалуйста как добавить ?, и как добавить этим итемам класс ?

class Main extends Component {
  render() {

    return (
      <article className="main">
        <div className="main-root">
        	{ this.props.counter.map((item) => React.createElement(`${item.tag}`))}
        </div>
        <Edit/>
      </article>
    );
  }
}

Comments

[FabiBoom]

React.createElement(elem, { key: index, className: 'class' });

Полагаю так.

[Lynn «Кофеман»]

Так а в чём трудность?
У react.createElement три параметра

[SerjAndreev]

FabiBoom, А вы не могли бы подсказать , А как дописать инлан стили ?

[FabiBoom]

SerjAndreev,

React.createElement(elem, { 
                style: {
                  fontSize: "12px",
                  color: "red"
              }
            });

[SerjAndreev]

FabiBoom,я поспешил немного с вопросом не раскрыв его полность., у меня со стора приходят дефолтные стили в обьекте styles width: 100, height: 100, не пойму как их дописать.
style: {
fontSize: "12px",
color: "red",
width: {
}

[FabiBoom]

SerjAndreev, ну тогда просто же

{
          style: styles,  // (твой обьект)
          className: 'test'
    }

Но важно, чтобы в обьекте значения свойств имели единицы измерения, тоесть не просто 100, а "100px".

[SerjAndreev]

спасибо вам))

[SerjAndreev]

FabiBoom, Извените не могли бы еще немного подсказать, как в редьюсере реализовать событик оnChange, при в воде в инпуте ?,извините за назойливость.

[SerjAndreev]

FabiBoom,

import React, { Component } from 'react';
import {NavLink, Link} from 'react-router-dom';
import logo from '../images/logo_dark.svg';

const MainHeader = (props = false) => {

    let data = {
        work: "Работаем: ПН-СБ",
        schedule: "9.00-19.00",
        supportEmail: "[e-mail]",
        links: {
            office: {
                href: '/office',
                caption: 'В кабинет',
                target: 'false'
            },
            registration: {
                href: '/registration/register',
                caption: "Зарегистрироваться",
                target: 'false'
            }
        },
        ...props
    };
    console.log("urlMenu", data)
    state = {
        menu: false
    };

    toggleMenu = () => {
        this.setState({
            menu: !this.state.menu
        })
    };
    const cls = [ "hamburger", "hamburger--spin"]
    if (open) {
        cls.push('is-active')
    }
    return (
        <header className="store-header header-default">
            <div className="container-fluid">
                <div className="header-default-box">
                    <Link key="anchLogo" to="/" className="store-header__logo"></Link>
                    <div className={ cls.join(' ') } onClick={ toggleMenu }>
                        <div className="hamburger-box">
                            <div className="hamburger-inner"></div>
                        </div>
                    </div>
                    <div className="header-default-support">
                        <span className="store-header__work">{data.work}<span>{data.schedule} </span></span>
                        <span className="store-header__support">
                            <a href={"mailto:" + data.supportEmail} >{data.supportEmail}</a>
                        </span>
                    </div>
                    <nav className="nav-default">
                        <ul className="nav-default-list">
                            <li>                                {
                                Object.values(data.links).map(({ href, caption,target }) => (
                                    <NavLink to={href} target={ target ? "_blank" : "_self" }>{caption}</NavLink>
                                ))
                            }</li>
                        </ul>
                    </nav>

                </div>
            </div>
        </header>
    );
}

export default MainHeader;

не могли бы подсказать почему гамбургер не открывается ?

[FabiBoom]

SerjAndreev, если еще есть вопросы можно связаться со мной в Telegram (@fabianowty)

Answer 1

[Антон Спирин]

Вариант с использованием JSX:

class Main extends Component {
  render() {

    return (
      <article className="main">
        <div className="main-root">
          {this.props.counter.map(({ tag: Tag }, i) => <Tag key={i} />)}
        </div>
        <Edit/>
      </article>
    );
  }
}

Answer 2

[h88p]

{ this.props.counter.map((item, index) => React.createElement(`${item.tag}`, {key: index}))}