var CONTACTS = [ { id: 1, name: 'Darth Vader', phoneNumber: '+250966666666', image: 'http://cs7.pikabu.ru/images/big_size_comm_an/2014-03_7/13962622876915.gif', mail: 'testmail.ru' }, { id: 2, name: 'Princess Leia', phoneNumber: '+250966344466', image: 'http://images6.fanpop.com/image/photos/33100000/CARRIE-FISHER-anakin-vader-and-princess-leia-33186069-190-149.gif' }, { id: 3, name: 'Luke Skywalker', phoneNumber: '+250976654433', image: 'http://www.youshouldshare.me/wp-content/uploads/2015/03/14264215682890-anigif_enhanced-buzz-13518-1367608452-4.gif' }, { id: 4, name: 'Chewbacca', phoneNumber: '+250456784935', image: 'https://media.giphy.com/media/RUUdVZqwpfTRS/giphy.gif' } ]; var Contact = React.createClass({ render: function(){ return <li > <img src={this.props.image} /> <div onClick={this.ClickFun} >{this.props.name}</div> <div>{this.props.phoneNumber}</div> </li>; } }); var Contactlist = React.createClass({ getInitialState:function(){ return { displayedContacts:CONTACTS }; }, Handler: function(event){ var QuerySearch = event.target.value.toLowerCase(); var displayedContacts = CONTACTS.filter(function(el){ var searchValue = el.name.toLowerCase(); return searchValue.indexOf(QuerySearch) !==-1; }); this.setState({ displayedContacts:displayedContacts }); }, render: function(){ return ( <div> <input className="Search" placeholder="Search Man" onChange={this.Handler} /> <ul> { this.state.displayedContacts.map(function (el) { return <Contact key={el.id} name={el.name} phoneNumber={el.phoneNumber} image={el.image} />; }) } </ul> </div> ) } }); ReactDOM.render(<Contactlist />,document.getElementById('content')); 
 body{ background-color: #008080; font-family: sans-serif; text-align: center; color: #fff; } #content{ width: 400px; height: 500px; background-color: #20B2AA; display: block; margin: 0 auto; box-shadow: 15px 15px 20px black; padding: 10px; } input{ width: 360px; padding: 10px; border: 1px solid black; } input:focus, input:hover{ border: 1px solid green; } h1{ margin: 20px; padding: 0; font-size: 30px; text-transform: uppercase; } img{ width: 60px; height: 60px; border-radius: 50%; } ul li{ list-style: none; border-bottom: 1px solid grey; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='content'> </div>

How to make it so that when you click on a contact, it turns around (increase in height) and some additional information about the contact (for example, address and email) should be displayed. When you click again, the information should be minimized.

    1 answer 1

    Add state opened:false contact, and change it with a click, tie a change in styles to it and, in fact, everything. For example, like this:

     var Contact = React.createClass({ state:{ opened: false } handleClick: function(){ this.state.opened ? this.setState({opened: flase}) : this.setState({opened: true}); } render: function(){ return <li onClick={this.handleClick.bind(this)}> <img src={this.props.image} /> <div onClick={this.ClickFun} >{this.props.name}</div> <div>{this.props.phoneNumber}</div> <div className={(this.state.opened ? '' : 'hidden')}>{this.props.mail}</div> <div className={(this.state.opened ? '' : 'hidden')}>{this.props.adress}</div> </li>; } });