Вопрос по ДЗ

[LyryKua]

Привет! Смотрю твой курс по ReactJS. Очень доступно и интересно обьясняешь, спасибо что делаешь это!

Вопрос по этому ДЗ следующий. Как обнулить статусы isOpened в контактах на которые не было нажато? Мне интересно как получить список всех контактов? Я понимаю, что это будет где-то в 36 строке.

И маленький вопрос в 48 строке. Как бы ты изменила тернарник в 49 строке?

Спасибо за ответ!

const CONTACTS = [
    {
        id: 1,
        name: "Darth Vader",
        phoneNumber: "+250966666666",
        email: "[email protected]",
        img: "img/darth.gif",
    }, {
        id: 2,
        name: "Princess Leia",
        phoneNumber: "+250966344466",
        email: "[email protected]",
        img: "img/leia.gif"
    }, {
        id: 3,
        name: "Luke Skywalker",
        phoneNumber: "+250976654433",
        email: "[email protected]",
        img: "img/luke.gif"
    }, {
        id: 4,
        name: "Chewbacca",
        phoneNumber: "+250456784935",
        email: "[email protected]",
        img: "img/chewbacca.gif"
    }
];

const Contact = React.createClass({
    getInitialState() {
        return ({
            isOpened: false,
        });
    },
    handleOpen() {
        // Здесь нужно установить isOpened: false в тех контактах на которые не было нажато
        this.setState({
            isOpened: !this.state.isOpened,
        });
    },
    render() {
        return (
            <li className="contact" onClick={this.handleOpen}>
                <img className="contact-image" src={this.props.img} alt={this.props.name} width={60} height={60}/>
                <div className="contact-info">
                    <div className="contact-name">{this.props.name}</div>
                    <div className="contact-number">{this.props.phoneNumber}</div>
                    {/* Как зарефаторить код в следующей строке? Как бы ты написала этот тернарник? */}
                    {this.state.isOpened ? <div className="contact-number">{this.props.email}</div> : null}
                </div>
            </li>
        );
    }
});

const ContactList = React.createClass({
    getInitialState() {
        return ({
            displayedContact: CONTACTS,
        });
    },
    handleSearch(event) {
        const searchQuery = event.target.value.toLowerCase();
        const displayedContacts = CONTACTS.filter(item => {
            return item.name.toLowerCase().indexOf(searchQuery) !== -1;
        });
        this.setState({
            displayedContact: displayedContacts,
        });
    },
    render() {
        return (
            <div className="contacts">
                <input className="search-field" type="text" onChange={this.handleSearch}/>
                <ul className="contacts-list">
                    {
                        this.state.displayedContact.map(item => {
                            return (
                                <Contact
                                    key={item.id}
                                    name={item.name}
                                    phoneNumber={item.phoneNumber}
                                    email={item.email}
                                    img={item.img}
                                />
                            );
                        })
                    }
                </ul>
            </div>
        );
    }
});

ReactDOM.render(
    <ContactList/>,
    document.getElementById("root")
);