How to insert a value from a React component into textarea value

Question

I'm trying to insert a value of a component inside a textarea value, I'm pulling the data from a backend and using it in the GetAboutApp component, it works fine inside other elements like <div> or <p> for example, but when using it in the textarea value property it gives me [object Object]

my GetAboutApp component code:

import { useState, useEffect } from 'react';
import Axios from 'axios';

const GetAboutApp = () => {
  const [appDesc, setAppDesc] = useState('');

  useEffect(() => {
    const getAppDesc = async () => {
      const getAppDescUrl = 'http://dev.com:3001/getAppDesc';

      try {
        const response = await Axios.get(getAppDescUrl);
        setAppDesc(response.data);
      } catch (err) {
        console.error(err);
      }
    };
    getAppDesc();

    return () => setAppDesc(''); // cleanup: set the value to nothing
  }, []);

  return (
    <>
      {appDesc.DescRetrieved === 1
        ? appDesc.result[0].rest_app_about.length > DescLen
          ? appDesc.result[0].rest_app_about.slice(0, DescLen) + '...'
          : appDesc.result[0].rest_app_about
        : appDesc.message}
    </>
  );
};

export default GetAboutApp;

My textarea element:

<textarea
                    name='aboutDescription'
                  id='aboutDescription'
                  defaultvalue={<GetAboutApp />}
                  minLength={MIN_DESC_LENGTH}
                  maxLength={MAX_DESC_LENGTH}
                  onChange={(e) => setAppDesc(e.target.value.trim())}
                  onKeyUp={(e) => {
                    const target = e.target.value.trim();

                    if (target.length > 0 && target.length < MIN_DESC_LENGTH) {
                      if (descErr)
                          descErr.textContent = `desc can't be less than ${MIN_DESC_LENGTH}`;
                      } else if (target.length > MAX_DESC_LENGTH) {
                        if (descErr)
                          descErr.textContent = `desc can't be more than ${MAX_DESC_LENGTH} character`;
                      } else {
                        if (descErr) descErr.textContent = '';
                      }
                    }}
                    required
                  ></textarea>

My question is how to render the content returned from component inside the textarea, or if there's any way around or trick to achieve this?

Answer 1

Is there a reason why you want to do this in a seperate component?

The reason why this isn't working is that you actually need a string for the "default value" but you're having a react Component (which is an Object, that's why it's giving you the [Object, Object])

You've got two options now. The easier but less "nice" way would be to directly call the API in the useEffect of the component where your text area actually is.

--> Then you would have direct access to your "getAccess" state, which is a string

The more beautiful way would be to write a custom hook. This is a component which gives you direct access to states. You also can use useEffect in custom hooks.

--> Also here you would have direct access to your state-variable. And you have it "outsourced" in the hook.

You can read more about custom hooks here: React Custom Hooks