将 props/this 传递给组件（未定义？）

Question

I am having an issue being able to pass a value from a parent to child functional component.

The issue is that this.state.dataURL is undefined when passed to the child but i cant work out why.

I've tried console logging props in the constructor and that is also undefined

Parent:

import UploadButton from './Components/UploadButton';
import previewTable from './Components/PreviewTable';


default export class uploadDataPage extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = { dataURL: 'default value' };
    this.changeData = this.changeData.bind(this);
  }
  
 
 changeData(newValue) {
     this.setState({dataURL : newValue});
    }


  render() {
    return (
      <UploadButton  dataURL = {this.state.dataURL} onChange={this.changeData}/>
    
    )
  }
}

Component

import React, { useState} from 'react';
import axios from "axios";


export default function UploadButton ({dataURL}) {
    

console.log(dataURL);
const uploadHandler = (event) => {
    
  const uploadedFile = new FormData();
 
  uploadedFile.append( 'file',    
        event.target.files[0], 
        
      ); 

    
    axios.post("http://127.0.0.1:5000/uploadFile", uploadedFile).then(response => 
    
        dataURL.onChange(response.data) 
                )
    
}
    
        return( 
        <div>
        <input type="file" name="file"  onChange={uploadHandler}/>
        </div>
        
        );
    };

Answer 1

Please use uppercase for component names: UploadDataPage

Once that's done, I can log dataURL in this sandbox: https://codesandbox.io/s/sharp-star-pemh2?file=/src/App.js:524-538