How to pass arguments to class component from a function-CodePudding

I have 2 files.

This is the snippet of the first file. I would like to send the setSelectedVideo variable to the Overview class so I can update it's content.

function Combine() {
    const [selectedVideo, setSelectedVideo] = useState(null);


    return (
        <div className="containers">
            <div >
                <Overview setSelectedVideo={setSelectedVideo}/>
            </div>
        </div>
    );

}

export default Combine;

This is the second file with the Overview class. How can I pass the setSelectedVideo variable so I can put data in it?


export default class Overview extends React.PureComponent {
  fileSelection(args) {
    //Check whether the selected item is a file or not.
    if (args.fileDetails.isFile && args.action == 'select') {
      //Print the complete path of the file within the File Manager.
      console.log(args.fileDetails.filterPath   args.fileDetails.name);
      // update state variable
      setSelectedVideo(args.fileDetails.filterPath   args.fileDetails.name);
    }
  }

  render() {
      return (
          
            ...
            
       );
  
   }
}

Any help on how to do this would be greatly appreciated.

Update with full code:

Combine.js

import React, { useState } from "react";
import Overview from "./FileManager";


function Combine() {
    const [selectedVideo, setSelectedVideo] = useState(null);
    const handleSelectedVideo = (arg) => {
        setSelectedVideo(arg)
      }

    return (
        <div className="containers">
            <div >
                <Overview handleSelectedVideo={handleSelectedVideo}/>
            </div>

        </div>
    );

}

export default Combine;

FileManager.js

import { render } from 'react-dom';
import * as React from 'react';
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar, ContextMenu } from '@syncfusion/ej2-react-filemanager';

/**
 * File Manager full functionalities sample
 */
export default class Overview extends React.PureComponent {
  hostUrl = "https://amazons3.azurewebsites.net/api/AmazonS3Provider/";


  fileSelection(args) {
    //Check whether the selected item is a file or not.
    if (args.fileDetails.isFile && args.action == 'select') {
      //Print the complete path of the file within the File Manager.
      console.log(args.fileDetails.filterPath   args.fileDetails.name);
     // update state variable
      this.props.handleSelectedVideo(args.fileDetails.filterPath   args.fileDetails.name);
    }
  }

  render() {
      return (
      <div>
              <div className="control-section">
                  <FileManagerComponent id="filemanager"                 
                
                ajaxSettings={{
                  url: 'http://localhost:62870/api/AmazonS3Provider/AmazonS3FileOperations',
                  downloadUrl:
                    'http://localhost:62870/api/AmazonS3Provider/AmazonS3Download',
                  uploadUrl:
                    'http://localhost:62870/api/AmazonS3Provider/AmazonS3Upload',
                  getImageUrl:
                    'http://localhost:62870/api/AmazonS3Provider/AmazonS3GetImage',
                }} searchSettings={{ allowSearchOnTyping: false }}
             fileSelect={this.fileSelection}
            uploadSettings={{ maxFileSize: 400000000 }}
               >
                
                  <Inject services={[NavigationPane, DetailsView, Toolbar, ContextMenu]}/>





                  </FileManagerComponent>
              </div>
          </div>);
  
}
}

CodePudding user response：

It is not recommended to pass setState functions directly, hence I would recommend you to create a wrapper function for this.

In your Combine.js:

const handleSelectedVideo = (arg) => {
  setSelectedVideo(arg)
}
<Overview handleSelectedVideo={handleSelectedVideo}/>

Overview.js:

export default class Overview extends React.PureComponent {
  constructor(props) {
    super(props);
    this.fileSelection= this.fileSelection.bind(this);
  } 
  fileSelection(args) {
    //Check whether the selected item is a file or not.
    if (args.fileDetails.isFile && args.action == 'select') {
      //Print the complete path of the file within the File Manager.
      console.log(args.fileDetails.filterPath   args.fileDetails.name);
      // update state variable
      this.props.handleSelectedVideo(args.fileDetails.filterPath   args.fileDetails.name);
    }
  }