How to style children divs

Really simple problem, but I cant find a solution. How would I be able to style both of the typography components without having to repeat the tailwind styling on each line, I try to put the stying in the “parent” div but it wont work. Thanks in advance. This is for a React-app

react component composition but confusing

so I have a code snippet here basically presenting the idea Dan mentioned which is to lift contents up in react to naturally improve performance and write cleaner code.
In the InputField component, the Button always renders, this is not the behavior I want, it should skip rendering the Button component .so what it should do is skip the render because Button is inputfield’s children props, and if children props does not change, react will skip the render.

How do I get the name and uuid to display when the form is submitted in React

I’m trying to create a web application that will have an entry field to collect a name, a button to submit, and an area to display a result message. I’m using a form styled with bootstrap and when using the “onSubmit” in the form, it is not doing anything, however if I change the form to “onClick”, it displays a Name:UUID, which is exactly the output I want.
React On Submit picture
React On Click picture
Can someone please help me understand why this is happening and how to fix it? How do I get the name and uuid to display when the form is submitted? Please see my code and screenshots below: