Redux Invoke function linked to onClick in a different file

I have a code written in React+Redux for a table. The mapping of the table goes as follows:-

ListTemp.js

//editTemp function invoked in the mapping below

 editTemp = (e, temp_id, temp_name, action_url, duration) => {
        e.preventDefault();

        this.props.getTemp(temp_id)

        this.setState({
            isEdit: true,
            temp_id : temp_id
        });
    }

<table  className = "table_style">
                 <thead>
                     <tr className = "table_style" >
                         <th className = "table_style">TempID</th>
                         <th className = "table_style">Name</th>
                         <th className = "table_style">CreatedOn</th>
                         <th className = "table_style">Action</th>
                     </tr>

               </thead>
               <tbody>
                {
                 this.props.temp_list.map((temp,index)=>
                     <tr className = "table_style">
                         <th className = "table_style">{temp.temp_id}</th>
                         <td className = "table_style">{temp.temp_name}</td>
                         <td className = "table_style">{temp.created_on}</td>
                         <td>
                         <button className="btn btn-info" type = "submit" onClick = {(e) => this.editTemp(e, temp.temp_id, temp.temp_name, temp.action_url, temp.duration)}>
                             EDIT
                         </button> 
                         </td>
                     </tr>
                     )
                 }
                </tbody>
                 </table>

Because of the table having a lot of data, I paginated it and the mapping was moved to a different file changing the code as follows:-

ListTemp.js

    showTemp = (temp) => {
        var result = null;
        if (temp.length > 0) {
            result = temp.map((temp, index) => {
                return <ListMapp key={index} temp={temp} index={index} />;
            });
        }
        return result;
    };

 editTemp = (e, temp_id, temp_name, action_url, duration) => {
        e.preventDefault();

        this.props.getTemp(temp_id)

        this.setState({
            isEdit: true,
            temp_id : temp_id
        });
    }

<table  className = "table table-bordered table-hover">
                        <thead>
                        <tr className = "table_style" >
                            <th className = "table_style">TempID</th>
                            <th className = "table_style">Name</th>
                            <th className = "table_style">CreatedOn</th>
                            <th className = "table_style">Action</th>
                        </tr>

                        </thead>
                        <tbody>
                           {
                                this.showTemp(rowsPerPage)
                           }
                        </tbody>
                        </table>

And the mapping in this.showTemp comes from:-

ListMapp.js

class ListMapp extends Component {

  render() {
    var { template, index } = this.props;

      return (
                     <tr className = "table_style">
                         <th className = "table_style">{temp.temp_id}</th>
                         <td className = "table_style">{temp.temp_name}</td>
                         <td className = "table_style">{temp.created_on}</td>
                         <td>
          <td>
             <button className="btn btn-info" type = "submit" onClick = {(e) => this.editTemp(e, temp.temp_id, temp.temp_name, temp.action_url, temp.duration)}>
            EDIT
          </button> 
          </td>               
        </tr>
      );
    }
  }

export default ListMapp;

What is the simplest way in this situation to link/call/map the editTemp function in ListTemp.js from ListMapp.js? Also, please clarify what the return type(s) and payload will be here for invoking of the function if applicable.