Encountering an error with a React component that I wrote and seeking assistance.
The primary component code snippet:
export interface ICode {
code: (code: string) => void;} export default class UserCode extends React.Component{
state = {
formFile: File,
code: ""
}
// Method for handling file selection
fileSelected(e: React.ChangeEvent<HTMLInputElement>) {
var file = e.target.files;
console.log(file);
if (e.target.files)
this.setState(
{ formFile: e.target.files[0] }
)
}
aaa() {
let value = (document.getElementsByClassName("user-code")[0] as HTMLInputElement).innerText;
alert(value);
console.log(value);
return value;
}
updateCodeInFather() {
this.props.code(this.state.code);
}
// Render method
render() {
return (
<div>
{/* <h6>Write your code here</h6> */}
<Editor className="user-code"
value={this.state.code}
onChange={code => { this.setState({ code }); this.updateCodeInFather(); }}
defaultLanguage="cpp"
width={590}
height={325}
defaultValue={"void setup()\n{\n// put your setup code here, to run once:\n}\nvoid loop()\n{\n// put your main code here, to run repeatedly:\n}"}
/>
<div>
<input placeholder="browse" name="browse" id="browse" type="file" onChange={(e) => this.fileSelected(e)} accept=".txt, .ino" ></input>
</div>
</div>
);
}
import Editor from './TagLanguage/Editor'
ReactDOM.render(
<React.StrictMode>
{
<Editor></Editor>
}
</React.StrictMode>,
document.getElementById('root')
);
The error message reads: No overload matches this call. Overload 1 of 2, '(props: Readonly): UserCode', gave the following error. Property 'code' is missing in type '{}' but required in type 'Readonly'. Overload 2 of 2, '(props: ICode, context?: any): UserCode', gave the following error. Property 'code' is missing in type '{}' but required in type 'Readonly'.