Why can I not call function in react js

Did you mean to use onClick? because onSubmit should be used on the <form> element.

<form onSubmit = {() => finish() }> 
</form>

<button onClick = {() => finish() }> 
</button>

function Task3(){

finish(){
    alert('Survey Submitted! Thank you');    

}

    return(
        <div className="head">
          <h1>Experiment</h1>
          <h3>Task 3</h3>
          <p>In Task 3, you will see the right answer of your guess. </p>
          <div className="video">
          <div> <MultiStep steps={steps}/> </div>

          </div>
         <button className="task3-finish" type="button" value="Submit" onClick= {this.finish} >Finish Thanks!</button>

          </div>);



}

export default Task3

I think this could help.

you need to pass that new function as a prop. then you can call the new function.

your functional component can look like this. (i commented some codes and changed onsubmit as onclik)

Task3.js

    import React from "react";

function Task3(props) {
  return (
    <div className="head">
      <h1>Experiment</h1>
      <h3>Task 3</h3>
      <p>In Task 3, you will see the right answer of your guess. </p>
      <div className="video">
        {/* <div>
          {" "}
          <MultiStep steps={steps} />{" "}
        </div> */}
      </div>
      <button className="task3-finish" onClick={props.callTask3Prop}>
        Finish Thanks!
      </button>
    </div>
  );
}

export default Task3;

App.js

import React, { Component } from "react";
import Task3 from "./Task3";

class App extends Component {
  callTask3() {
    alert("Task3 call...");
  }

  render() {
    return (
      <div className="App">
        <Task3 callTask3Prop={this.callTask3} />
      </div>
    );
  }
}

export default App;

i have added a working example here, example