Реагировать: как отобразить объект по умолчанию и выделить li жирным шрифтом?

Я новичок в React, и мне было интересно, может ли кто-нибудь дать мне представление о проблеме, с которой я застрял.

Прямо сейчас у меня есть родительский компонент (Hello.js) и два дочерних компонента (Mixer.js и renderCont.js) на том же уровне.

Я пытаюсь отобразить список в Mixer.js и отобразить соответствующие объекты в Hello.js, передав значения в RenderCont.js. Я дошел до точки, когда ничего не отображается, прежде чем я нажму на любой из списка, чтобы передать объект.

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

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

Родитель Hello.js:

import React, { Component } from 'react';
import RenderCont from './renderCont.js';
import Mixer from './Mixer';

class Hello extends Component{
    constructor(props) {
        super(props);
        this.state = {
        items: [{
            id: 0,
            name: "First",
            background: "white"
        }, {
            id: 1,
            name: "Second",
            background: "yellow"
        }, {
            id: 2,
            name: "Third",
            background: "blue"
        }],
        selectedItem: 0
        }
        this.handle = this.handle.bind(this)
    }

    handle(value) {
        // console.info(this.state.selectedItem);
        this.setState({
            selectedItem: value
        })
      }

      render() {
        const list = this.state.items.map((item) => {
            return(item);
        })
        return (
        <div>
            <Mixer item = {list} onClick = {this.handle} selected = {this.state.selectedItem}/>
            <ul id = "todo" > 
                <RenderCont item = {this.state.selectedItem}/>
            </ul>
        </div>
      ) 
    }
}

export default Hello;

Mixer.js Child1:

    import React, { Component } from 'react';

    class Mixer extends Component{
        constructor(props) {
            super(props);
            this.state = {
            }
        this.handleClick = this.handleClick.bind(this);

    }

    handleClick(item){
        this.props.onClick(item);
    }

    renderTodos(propItems) {
          return (
              <div>
                {propItems.map((item) => (
                <li className = {this.props.selected === item ? 'media clicked' : 'media'}
                key = {item.id} onClick = {() => this.handleClick(item)}> 
                    {item.name}  
                </li>
                ))}
           </div>
          )
      }

      render() {
          return ( 
            <div className = "yoyoyo">
                {this.renderTodos(this.props.item)}
            </div>
      ) 
    }
}

export default Mixer;

Второй дочерний компонент renderCont.js:

import React, { Component } from 'react';

class RenderCont extends Component{
    constructor(props) {
        super(props);
    }

    renderBox(item){
        return(
            <div style = {{color:item.background}}>
                {item.id}
                {item.name}
            </div>
        )
    }

    render() {
    return ( 
        <div className = "yoyo">
            {this.renderBox(this.props.item)}
        </div>
    )
    }
}

export default RenderCont;

и CSS:

.yoyo{
  left: 500px;
  background-color:red;
  width:500px;
  height:500px;
}

.media{
  color: black;
}
.clicked{
  font-weight: 900;
}

.yoyoyo{
  background-color:lightblue;
  width:200px;
  height:200px;
}