Роман Александрович

https://stackoverflow.com/questions/10479679/how-c...
вот тут ответ. В кратце здесь написано что разработчики не позволяют использовать данную функцию. Если вам нужно что либо сообщить пользователю вы можете использовать Desktop notifications.

constructor() {
        super();
        this.state = {
            data: {},
            trainer: [],
            diagram: this.chartData(),
        };

this.chartData=this.chartData.bind(chartData)
    }

<Children state={this.state}>

вы прям задались целью написать сами слайдер или просто не нашли нормальный готовый?
Ответ на ваш вопрос без разници где вы буду хранить currentSlideImage в стэйте или в сторе (если вы используете редукс). Но если вы будете использовать стейт переключение будет реализовать быстрее и думаю в этом моменте правильнее если конечно вам не важно при повторном переходе на страницу с данным слайдером показывать последний слайд на котором остановился пользователь.

import React, { Component } from 'react';

class Slider extends Component {
constructor(props){
super()
this.state=({
currentSlideImage : 0
})
}

handlePrevButton(){
        let currentSlideImage = this.state.currentSlideImage;
this.setState({
currentSlideImage:currentSlideImage-1
})
    }

    handleNextButton(){
       let currentSlideImage = this.state.currentSlideImage;
    this.setState({
    currentSlideImage:currentSlideImage+1
    })
    }

    render() {
        return (
            <div className="container">
                <button onClick={()=>this.handlePrevButton()}>Prev</button>
                <img src={this.props.slides[this.state.currentSlideImage]} alt="slider-item"/>
                <button onClick={()=>this.handleNextButton()}>Next</button>
            </div>
        );
    }
}

export default Slider;

В данном коде не хватает проверки при клике на next возможно ситуация когда количество фоток 3 а пользователь накликал 4 произойдет ошибка. Тоже самое с prev кнопкой.

https://codepen.io/anon/pen/NyGbQb?editors=1010

если бы у вас был массив обьектов типа

array=[
{id: 1, title: "some-text", color: "black"},
{id: 2, title: "some-text", color: "black"},
{id: 3, title: "some-text", color: "black"}
]

тогда был бы смысл использовать map, в вашем случае думаю и for хватит

selectItem(itemId){
        console.log("Item ID " + itemId);
        this.setState({activeItemId: itemId},()=>{console.log("State: " + this.state.activeItemId)});
        
    }

setState ассинхронна

nameFunc(value){

}
<a href="#" onClick={this.nameFunc(value)} index={value}>Link</a>

так не пайдет?

Попробуйте так
https://jsfiddle.net/gmua11a5/

let CONTACTS = [
  {
    id:1,
    name: 'Kamila Abcentova',
    phoneNumber: '+79503124111',
    image: 'https://i.pinimg.com/736x/63/57/fa/6357fa6703775b165e739a1c6a1d0899--berges-portrait-paintings.jpg'
  },
  {
    id:2,
    name: 'Denis Abramov',
    phoneNumber: '+79506224211',
    image: 'https://pbs.twimg.com/media/BvVsFVBCcAAT_Pt.jpg:large'
  },
  {
    id:3,
    name: 'Kristian Sendler',
    phoneNumber: '+79236444211',
    image: 'https://thairomances.com/userfiles/ProfilePhoto/14244/39093-full_size.jpg?v=3'
  },
  {
    id:4,
    name: 'Marat Kizombov',
    phoneNumber: '+79321445511',
    image: 'http://funstories.lol/wp-content/uploads/2016/07/2-121-768x768.jpg'
  }
];

class Contact extends React.Component{
  render(){
    return <li className='contact'>
      <img className='contact-image' src={this.props.image} width='60px' height='60px'/>
      <div className='contact-info'>
        <div className='contact-name'>{this.props.name}</div>
        <div className='contact-phone'>{this.props.phoneNumber}</div>
      </div>
    </li>
  }
}

class ContactList extends React.Component{
  constructor(props){
    super(props);
this.state={
input=""
}
    this.handleSearch = this.handleSearch.bind(this);

  }
  
  handleSearch(el){
    console.log(el.target.value)
this.setState({
input:el.target.value
})
  }
  render(){
      return(
        <div className='contacts'>
          <input type='text' className='search-fields' onChange={this.handleSearch} value={this.state.input}/>
<div>{this.state.input}</div>
          <ul className='contacts-list'>
            {
              CONTACTS.map(function(el){
                return <Contact 
                         key={el.id}
                         name={el.name}
                         phoneNumber={el.phoneNumber}
                         image={el.image}
                         />;
              })
            }
          </ul>
        </div>
      );
    }
}

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