Rendering Lists

import React, { Component }  from 'react';

class Counter extends Component {
    state = {
        count: 0,
        tags: ["tag1", "tag2", "tag3"]
    };

    render() {
        return(
            <div>
                <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
                <button className="btn btn-secondary btn-sm">Increment</button>
                <ul>
                    {this.state.tags.map(tag => <li>{tag}</li>)}
                </ul>
            </div>
        ) 
    }

    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += this.state.count === 0 ? "warning" : "primary";
        return classes;
    }

    formatCount() {
        const { count } = this.state;
        return count === 0 ? <h1>Zero</h1> : count;
    }
}

export default Counter

kalo kita liat disini ada erroy key, karna tidak ada nya unique data disini.

ubah sedikit codingan baris 15 seperti di bawah :

{this.state.tags.map(tag => <li key={tag}>{tag}</li>)}