Javascript-форум - Компонент React JS

Javascript-форум (https://javascript.ru/forum/)

- Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)

- - Компонент React JS (https://javascript.ru/forum/library-toolkit-framework/77244-komponent-react-js.html)

Компонент React JS

В компоненте отрисовываю объект из массива, вставляя значения строк объекта в DOM дерево. Для выделения каждого объекта из массива использую .map Такой вопрос, как разбить строку в объекте на значения, что бы каждое значение из строки объекта можно было отдельно показывать.

array = [
 {
 ...object,
 name: "Name1, Name, Name3"
 }
];


import React from 'react';
//redux
import { connect }  from 'react-redux';

const Projects = ({ projects }) => {
	return (
		<div className="container">		
     {
        projects.map((project) => {
          return (
            <div key={project.id}>
              <div>
                <h3>{project.label}</h3>
                <img src={project.image} alt="" />
                <div>
                  <p>{project.text}</p>
                </div>
                <ul>
                 <li>{project.name}</li>
                  <li>{project.name}</li>
                  <li>{project.name}</li>
                </ul>
              </div>
            </div>
          )
        })
      }		
		</div>
	)
};

const mapStateToProps = ({ projects }) => {
    return { projects };
};

export default connect(mapStateToProps)(Projects);

array = [
 {
 ...object,
 name: "Name1, Name, Name3".split(/,\s/)
 }
];

<ul>
    {project.name.map(text => <li>{text}</li>)}             
</ul>

Цитата:

Сообщение от destus (Сообщение 506286)

array = [
 {
 ...object,
 name: "Name1, Name, Name3".split(/,\s/)
 }
];

<ul>
    {project.name.map(text => <li>{text}</li>)}             
</ul>

Не подходит, пишет что Cannot read property 'map' of undefined

projects: [
    {
      id : 1,
      name: "name1, name2, name3".split(/,\s/)
    }
  ]
};


import React from 'react';
//redux
import { connect }  from 'react-redux';
//css
import './projects.css';

const Projects = ({ projects }) => {
	return (
    <ul>
        {
          projects.name.map((text) => {
            return (
              <li>{text}</li>  
              )
          })
        }
    </ul>
	)
};
const mapStateToProps = ({ projects }) => {
    return { projects };
};
export default connect(mapStateToProps)(Projects);

потому что данные надо хранить в нормализованном состоянии, и не писать унылые велосипеды

Цитата:

Сообщение от SuperZen (Сообщение 506294)

потому что данные надо хранить в нормализованном состоянии, и не писать унылые велосипеды

Можно пример таких данных?

а строку иногда на значения нужно разбивать, если их нужно перечислить в разных тегах. Вот только не понятно как поступать с id, ведь key={array.id} идет в тег, где отрисовываем весь объект, а тут при разделении строки на значения получается опять id нужно будет присваивать тегам куда идут эти значения.

import React from 'react';
//redux
import { connect }  from 'react-redux';
//css
import './projects.css';

const Projects = ({ projects }) => {
	return (
		<div>
      {
        projects.map((project) => {
          return (
            <div key={project.id}>
              <div className="card mb-3">
                <h3>{project.title}</h3>
                <img src={project.image} alt="" />
                <div className="card-body">
                  <p>{project.text}</p>
                </div>
                <ul>
                  {
                    project.skills.map((skill) => {
                      return (
                        <li>{skill}</li>
                      )                         
                    })                        
                  }                                 
                </ul>
              </div>
            </div>
          )
        })
      }
		</div>
	)
};

const mapStateToProps = ({ projects }) => {
    return { projects };
};
export default connect(mapStateToProps)(Projects);

Вот тут как поступить с unique key?

{
   project.skills.map((skill) => {
      return (
        <li>{skill}</li>
      )                         
   })                        
  }

let obj = {
  projects: [
    {
      id: 1,
      name: [
        "name1",
        "name2",
        "name3"
      ]
    }
  ]
}

project.skills.map((skill) => <li key={skill}>{skill}</li>)

у тебя будет дерево (VDOM) project.id -> skills
ну и соответственно если есть несколько project.id они не будут пересекаться

1- (прожект)
1.1 - скил1
1.2 - скил2
2- (прожект)
2.1 - скил1

[quote=SuperZen;506297]

let obj = {
  projects: [
    {
      id: 1,
      skills: [
        "skill1",
        "skill2",
        "skill3"
      ]
    }
  ]
}

project.skills.map((skill) => <li key={skill}>{skill}</li>)

не очень понимаю откуда в key={skill} возмется id если в skills [] нет такой строчки. И я так понимаю лучше хранить данные массив в массиве, если нужно, а не перечислять в строке? тогда такая приписка не нужна будет?

skills: skill1, skill2, skill3".split(/,\s/)

Достаточно будет написать так? project.skills.map

не понятно, что в итоге должно получиться, откуда появляется эта строка, массив и т.д.

может быть ) просто надо про map прочитать внимательнее

project.skills.map((skill, id) => <li key={id}>{id} - {skill}</li>)

зачем это все?