-1
import React, {Component} from 'react';

class Header extends Component {
    render() {
        return (
            <div>
                {this.props.items.map((item, index) =>
                    <li key={index} onClick={() => this.props.items.push(item.id)}>{item.id}</li>
                )}
                <span onClick={() => console.log(this.props.items)}>test</span>
            </div>
        );
    }
}

export default Header;

Я вывожу массив с помощью map. При двойном клике на элемент, я хочу, чтобы он добавился в массив и отренденился снизу списка. Добавить в массив могу, а отрендерить - нет.

import React, {Component} from 'react';
import Header from './Header';

const menu = [
    {
        link: 'link1',
        id: 'Articles'
    },
    {
        link: 'link2',
        id: 'Contacts'
    },
    {
        link: 'link3',
        id: 'Posts'
    },
    {
        link: 'link1',
        id: 'Lorem'
    },
    {
        link: 'link2',
        id: 'Ipsum'
    },
    {
        link: 'link3',
        id: 'Test'
    }
];

class App extends Component {
    render() {
        return (
            <div>
                <Header items={menu}/>
            </div>
        );
    }
}

export default App;

1 ответ 1

1

Вы хотя бы документацию почитайте, что ли, перед тем как браться за реакт

import React, {Component} from 'react';
import Header from './Header';

class Header extends Component {
    render() {
        return (
            <div>
                {this.props.items.map((item, index) =>
                    <li key={index} onClick={() => this.props.addToArray(item.id)}>{item.id}</li>
                )}
                <span onClick={() => console.log(this.props.items)}>test</span>
            </div>
        );
    }
}

class App extends Component {
    state = {
      menu: [
    {
        link: 'link1',
        id: 'Articles'
    },
    {
        link: 'link2',
        id: 'Contacts'
    },
    {
        link: 'link3',
        id: 'Posts'
    },
    {
        link: 'link1',
        id: 'Lorem'
    },
    {
        link: 'link2',
        id: 'Ipsum'
    },
    {
        link: 'link3',
        id: 'Test'
    }
]}

    addToArray = (id) => {
      this.setState(state => {
        return {
          menu: [...state.menu, {id, link: 'link'}]
        }
      })
    }

    render() {
        return (
            <div>
                <Header items={this.state.menu} addToArray={this.addToArray}/>
            </div>
        );
    }
}

export default App;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.