React - Chatbot - Display response from the bot

Below is the final code for the chatbot.

 

<!DOCTYPE html>
<html>
  <head>
    <title>Chatbot</title>
  </head>
  <body>
    <div class="js-container"></div>
    

    <script src="https://unpkg.com/supersimpledev/react.js"></script>
    <script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
    <script src="https://unpkg.com/supersimpledev/chatbot.js"></script>
    <script src="https://unpkg.com/supersimpledev/babel.js"></script>
 
  <script type="text/babel">
    
       function ChatInput({chatMessages, setChatMessages}){
          const [inputText, setInputText] = React.useState('');

          function saveInputText(event) {
          // console.log(event.target.value);
            setInputText(event.target.value);
          }

          function sendMessage() {
         //   console.log(inputText);

         const newChatMessages = [
            ...chatMessages,
          {
              message : inputText,
              sender : 'user',
              id  : crypto.randomUUID()
          }
        ];
        setChatMessages(newChatMessages);
         
        const response = Chatbot.getResponse(inputText);
        //    console.log(response);  

          setChatMessages([
                ...newChatMessages,
              {
                  message : response,
                  sender : 'robot',
                  id  : crypto.randomUUID()
              }
              
            ]);

            setInputText('');  
          }
        return (
       
          <> {/* using fragment to remove extra div elements */}
             <input placeholder="Send a message to chatbot" 
             size="30"
             onChange={saveInputText}
             value={inputText}
             />
             <button
               onClick = {sendMessage}
             >Send</button>
          </>

        );
       }

    

      function ChatMessage({message, sender}){
          
          return (
              <div> {/* use div element to put the ChatMessage on a new line */}
              {sender === 'robot' && <img src="robot.jpeg" width= "50"/>}
                {message}
              {sender === 'user' && <img src="human.jpeg" width= "50"/>}
                </div>

              )
          
       }  

function ChatMessages({chatMessages}) {

/* in react we should not modify the data directly. 
We should create a copy of the data and modify the copy. */


return (
<>
{chatMessages.map((chatMessage) => {
return (
  <ChatMessage 
     message={chatMessage.message}
     sender={chatMessage.sender}
     key={chatMessage.id}
/>
);
} )}
</>
);
}

      function App (){
        const array = React.useState([{
            message: 'hello chatbot',
            sender: 'user',
            id : 'id1'
        }, {
            message: 'Hello! How can I help you?',
            sender: 'robot',
            id : 'id2'
        },
        {
            message: 'Can you get me todays date?',
            sender: 'user',
            id : 'id3'
        },
        {
            message: 'Today is September 26',
            sender: 'robot',
            id : 'id4'
        } ] );
 
        const chatMessages = array[0];
        const setChatMessages = array[1];
        return (<>
        <ChatInput 
           chatMessages={chatMessages}
           setChatMessages={setChatMessages}
         />
        <ChatMessages 
          chatMessages={chatMessages}
        />
      </>);  

      } 

      //const app = ( App );
      const container = document.querySelector('.js-container');
      ReactDOM.createRoot(container).render(<App />);
    </script>
  </body>
</html>