App.js

function App() {
  const [channels, setchannels] = useState(INITIAL_CHANNELS)

  const handleUpdateChannel = (updatedChannelData) => {
    // set the state to the new updated data
  }

  return (
    <div>
      <Sidebar channelList={ channels }/>
      <Channel channel={ channels[0] } onUpdateChannel={ handleUpdateChannel } />
    </div>
  );
}

export default App;

Channel.js

import React from 'react'

export default function Channel(props) {

    const onEditButtonClicked = () => {
        props.onUpdateChannel
    }

    return (
        <div>
            <h4>{ props.channel.name }</h4>
            <MessageList messageList={ props.channel.messages } />
            <NewMessageForm />
        </div>
    )
}

data.js

// example channels array
const INITIAL_CHANNELS = [
    {
        name: "onfdsfds-2021-07-14",
        messages: [
            {
                author: "Natalie Childs",
                text: "Welcome week 3",
                unread: false
            },
            {
                author: "fdsfdsfsd",
                text: "I need help on something"
            }
        ]
    },
    {
        name: "onfdsfds-2021-19-14",
        messages: [
            {
                author: "Natalie Childs",
                text: "I need help on something"
            },
            {
                author: "fdsfdsfsd",
                text: "I need help on something"
            }
        ]
    }
]

MessageList.js

import React from 'react'

export default function MessageList(props) {
    return (
        <div>
            { props.messageList.map(message => <Message message={message} /> )}
        </div>
    )
}