How to pass value via `props` in export function in react-hooks

Question

How to use props in export function in react-hooks. I would like to export a function to feed onSubmit() in Profile.js. I would like to get the companyName value from CompanyDetails and passed to Profile and use in onSubmit() via props. I am getting 'companyName' undefined error now.

    import CompanyDetails from "./CompanyDetails";
    
    const Profile = () =>{
    
        const onSubmit = (companyName) =>{
            const profileData = async () => {
                try {   
                  const res = await axios.put('http://localhost:8000/service/company', companyName);
                  if (res.data.success) {
                   
                    // push do the rest of code after save here...
                  }
                  else {
                    console.log(res.data.message);
                    
                  }
                } catch (e) {
                   console.log(e.response.data.message);
                }
              }
             //return () => { profileData() }
             profileData();
        }
        return (
            <div className="profile_wrapper">
                <div className="wrap">
                    <h1>Details:</h1>
                </div>
                <CompanyDetails 
                 onSubmit={onSubmit}
                />
            </div>
        );
    
    }
export default Profile;


export default function CompanyDetails ({onSubmit}) {
    
        const [companyName, setCompanyName] = useState('');
    
        const handleChange = (e) => {
            e.persist();
            const {value} = e.target.value
            setCompanyName(value);
          }
          
      return (
        <div className="container">
            <Select defaultValue={'DEFAULT'} name="company" onChange={e =>handleChange(e)} id="select">
                <option value="DEFAULT" disabled>Choose an option</option>
                <option value="company1">Company 1</option>
                <option value="company2">Company 2</option>
            <Select>
            <Button onClick={onSubmit(companyName)} color="primary">
                Save
            </Button>
        </div> 
      );
    }

Answer 1

Ok, so I finally got it working. Although I had to basically rewrite everything from scratch to try and catch all the weird little bugs that would come up. But I believe the crux of the problem was making several improper function calls. You can take a look at the changes and see where I did things differently.

Here is a Codesandbox with the working code.

I had to mock making an axios request, but since the mock returns a promise just like an axios request would, you should be able to replace it with a working API on your end.

If things still aren't working, then leave a public API endpoint in the comments and I will test everything without the mocks.

Also note that sometimes I encountered an error with importing the material-ui components. But this seems to be an issue with Codesandbox and not with the components themselves.