TRNER

Добавьте position: relative диву с айди parent

Так же есть вариант прокинуть стейт через React-router.

Передаем через Link to-object
Получаем через location

devServer: {
    contentBase: './dist',
    historyApiFallback: true,
}

props.children

Данные из дочернего компонента в родительский можно передать посредством коллбэк функций, переданных через пропс. Пример

Как вариант, возможно.

Примерно так, я полагаю?

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

Судя по коду, console.log вызывается при вызове контекстного меню (= пкм) по блоку с классом item, у меня все прекрасно работает.

audio.volume=rng.value / 100;

либо

<input id="range" min="0" max="1" step="0.01" value="1" type="range">

volume принимает значения от 0 до 1, а значение ползунка сейчас варьируется от 1 до 100

componentDidMount вызывается после того как смонтируется компонент со всеми его дочерними элементами (следовательно, когда мы пытаемся использовать props.items, запрос к json еще даже не будет отправлен).

Можно присвоить пустой массив для items в initialState, чтобы избавиться от этой ошибки, либо же добавить вспомогательное состояние, которое бы проверяло, загружены ли у нас данные, и если да, то выводить их.

Вы правы в том, что он "не успевает вмонтироваться". Функция setState работает асинхронно, и промис не будет дожидаться ее выполнения перед вызовом следующего .then в цепочке, так что у нас нет никаких гарантий на то, что состояние обновится к следующему использованию стейта. В таких случаях обычно используют коллбэк, который передается в setState вторым аргументом и вызывается после обновления состояния, вызванного этим методом, однако в нашем случае, я думаю, можно обновить все за один раз.

getRate() {
        fetch('https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5')
            .then(data => {
                return data.json()
            })
            .then(data => {
                let res = {};
                for (let i = 0; i < this.currency.length; i++) {
                    res[this.currency[i]] = data[i];
                }

                let obj = Object.entries(res).map((item, number) => {
                    return (
                        <div className="rates-info" key={number.toString()}>
                            <div className="rates-info_name" >
                                <p>{item[1].ccy}</p>
                            </div>
                            <div className="rates-info_value">
                                <div className="info_value-buy">
                                    <p>Покупка</p>
                                    <p>{item[1].buy}</p>
                                </div>
                                <div className="info_value-buy">
                                    <p>Продажа</p>
                                    <p>{item[1].sale}</p>
                                </div>
                            </div>
                        </div>
                    )
                })
                this.setState({ currencyRate: { res }, div: obj });

            });
    }