Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How I map Dynamic file in api response to textarea

`Success: 'Link Data Fetch Successfully', AllProjectsF23: 'Age and Gender Detection Using Deep Learning, Abst…on, Functional Requirements:, Tools:, Supervisor:'}
AllProjectsF23
: 
"Age and Gender Detection Using Deep Learning, Abs
Success
: 
"Link Data Fetch Successfully"`

I have above api response where AllProjectsF23 is dynamic file name and depend on input file name. I use axios post method to request django backend. My api code is:
`

const handleUpload = async () => {
    try {
      if (selectedFile) {
        const formData = new FormData();
        formData.append("files", selectedFile);

        const response = await axios.post(
          "xxxxxxxxxxxxxxxxxxxxxxx",
          formData,
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        );

        console.log("Server Response:", response.data);
        setResponseData(response.data);
        console.log(responseData);

        console.log("Success:");
      } else {
        console.error("No file selected");
      }
    } catch (error) {
      console.error("Error uploading file:", error);
    }
  };

how i do this easily and map this response to textbox in reactjs

Tags:

2

Answers


  1. 0

    To dynamically handle the response and map it to a textarea in a React component, you can follow this:

    first, Update State for File Content:
    Initialize a state variable to store the dynamic file content received from the API response. like this

    import React, { useState } from 'react';

const YourComponent = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [responseData, setResponseData] = useState('');
  // other state variables...

  // the rest of your Code bro ...

  const handleUpload = async () => {
    try {
      // the rest of your code !...

      console.log("Server Response:", response.data);
      setResponseData(response.data.AllProjectsF23); // Assuming 'AllProjectsF23' contains the file content
    } catch (error) {
      console.error("Error uploading file:", error);
    }
  };

  // the rest of your code bro !...

  return (
    <div>
      {/* the rest of your code !!!... */}

      {/* Display the response in a textarea */}
      <textarea
        value={responseData}
        rows={10}
        cols={50}
        readOnly
      />
    </div>
  );
};

export default YourComponent;

    the you need to update your FromData Key .
    Assuming that the dynamic file name is available in the response, update the key in the formData.append method to use the dynamic file name.

    const handleUpload = async () => {
  try {
    // the rest of your code bro ...

    const response = await axios.post(
      "xxxxxxxxxxxxxxxxxxxxxxx",
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    );

    console.log("Server Response:", response.data);
    setResponseData(response.data[response.data.Success]); // Use dynamic key from the response
  } catch (error) {
    console.error("Error uploading file:", error);
  }
};

    Make sure to replace ‘AllProjectsF23’ with the actual dynamic key you want to use from the API response. Adjust the code according to your specific requirements. With these changes, the file content should be displayed in the textarea in your React component.

    Login or Signup to reply.
  2. 0

    yea! To make the header flexible and handle different dynamic file names, you can use the following approach

    const YourComponent = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [responseData, setResponseData] = useState('');
  // other state variables...

  const handleUpload = async () => {
    try {
      // your code !...

      // Assuming response.data has a dynamic key, use Object.keys to get the first key
      const dynamicKey = Object.keys(response.data)[0];
      setResponseData(response.data[dynamicKey]);
    } catch (error) {
      console.error("Error uploading file:", error);
    }
  };

  // the rest of your code bro !...

  return (
    <div>
      {/* the rest of your code !!!... */}

      {/* Display the response in a textarea */}
      <textarea
        value={responseData}
        rows={10}
        cols={50}
        readOnly
      />
    </div>
  );
};

export default YourComponent;

    This code assumes that the API response has only one dynamic key, and it uses Object.keys to get that key dynamically. Adjust the code according to your specific API response structure.

    If you have multiple dynamic keys in your API response, you might need to loop through them or use a specific key based on your requirements.

    For example, if your API response looks like this:

    response.data = {
  AllProjectsF23: 'Age and Gender Detection Using Deep Learning...',
  AnotherDynamicFile: 'Content for another dynamic file...',
  // Other dynamic files...
};

    You can modify the code to loop through all keys and display them in a dropdown or handle them in another way:

    // Inside handleUpload function
const dynamicKeys = Object.keys(response.data);
const firstDynamicKey = dynamicKeys[0];
setResponseData(response.data[firstDynamicKey]);

    Then, you can provide an option for users to select the dynamic key they want to display in the text area.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search