Как вставить путь к картинке с JSON?

Question

[Дима Долготер]

React.createElement('ul',null,text.map(function(prod){
            return <li>{prod.id}  {prod.image}  {prod.title}</li>;
          }

так выводит id путь к картинке и тайтл

React.createElement('ul',null,text.map(function(prod){
            return <li>{prod.id}  <img src={prod.image}>  {prod.title}</li>;
          }

так ругается. ругается на : после li, так что какая-то беда)

Comments

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

А зачем вы используете React.createElement? Так уже давно никто не пишет.

[Дима Долготер]

Антон Спирин, Антон Спирин, а как пишут? я только начал учить

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

Дима Долготер, когда нет сосотояния и не используются методы жизненного цикла, используют stateless functional component:

const List = props => (
  <ul>
    {props.text.map(prod => (
      <img src={prod.image}>{prod.title)</li>
    ))}
  </ul>
);

или:

function List(props) {
  return (
    <ul>
      {props.text.map(prod => (
        <img src={prod.image}>{prod.title)</li>
      ))}
    </ul>
  );
}

Когда у компонента есть состояние или надо использовать методы жизненного цикла, или прописать внутри хандлеры используют class component:

class List extends React.Component {
  state = {
    someValue: 'value',
  };
  
  componentDidMount() {
    // do something
  }  

  handleClick = e => {
    // do something
  };

  render() {
    const { text } = this.props;

    return() (
      <ul>
        {text.map(prod => (
          <img
            onClick={this.handleClick}
            src={prod.image}
          >
            {prod.title)
          </li>
        ))}
      </ul>
    ); 
  }
}

или:

class List extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      someValue: 'value',
    };

    this.handleClick = this.handleClick.bind(this);
  }  
  
  componentDidMount() {
    // do something
  }  

  handleClick(e) {
    // do something
  }

  render() {
    const { text } = this.props;

    return() (
      <ul>
        {text.map(prod => (
          <img
            onClick={this.handleClick}
            src={prod.image}
          >
            {prod.title)
          </li>
        ))}
      </ul>
    ); 
  }
}

Answer 1

[Anton fon Faust]

img нужно создавать через React.createElement

Comments

[Дима Долготер]

А src как указать? просто src?

[Anton fon Faust]

Дима Долготер,

React.createElement(
  'img',
  {src: 'path/to/img'},
  null
);

[Дима Долготер]

Anton fon Faust, мне не статичный путь, а вынимать путь для каждого

[Anton fon Faust]

Дима Долготер, так и передайте это значение.