I have been trying to upload a file to an api but getting this error Objects are not valid as a React child, use an array instead

Question

I have been trying to submit a file to my API but I am getting this:

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

Below is my code for submitting the data:

const handleSubmit = async () => {
    try {
      const resumeData = selectedResume?.id ? { resumeId: selectedResume.id } : { resumeFile: selectedResume };

      const values = questions?.map((question) => ({
        id: question?.id,
        answer: answers[`question${question?.id}`],
      }));

      const data = {
        jobId: job?.id,
        resumeType: 'internal',
        ...resumeData,
        values,
      };
      console.log('data sent to api', data);
      const response = await axios.post(`/api/v1/jobs/stu/apply/`, data);
      console.log(response.data);
      enqueueSnackbar(response.data.message);
      onClose();
      window.location.reload();
    } catch (error) {
      console.log(error);
    }
  }; 

and below is the code from where I am submitting this resume:

const ResumeStep = ({ onNext, onCancel }) => {
  const [resumeList, setResumeList] = useState([]);
  const [selectedResume, setSelectedResume] = useState('');
  const [selectedFile, setSelectedFile] = useState(null);


  useEffect(() => {
    fetchResume();
  }, []);

  const fetchResume = async () => {
    try {
      const res = await axios.get('/api/v1/jobs/stu/resumes/');
      setResumeList(res.data);
    } catch (error) {
      console.error('Error fetching resumes:', error);
    }
  };

  const handleResumeChange = (event) => {
    setSelectedResume(event.target.value);
  };

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  
  const handleRemove = () => {
    setSelectedFile(null);
  };

  const handleSubmit = () => {
    if (selectedFile) {
      onNext(selectedFile);
    } else {
      onNext(selectedResume);
    }
  };

  return (
    <>
      <DialogTitle>Submit Resume</DialogTitle>
      <FormControl fullWidth sx={{ padding: '20px' }}>
        <FormControl fullWidth sx={{ marginBottom: '20px' }}>
          <InputLabel>Select a resume</InputLabel>
          <Select value={selectedResume} onChange={handleResumeChange} label="Select a resume">
            {resumeList.map((resume) => (
              <MenuItem key={resume.id} value={resume}>
                {resume.name}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
        <Divider sx={{ marginBottom: '10px' }} />
        <FormControl fullWidth sx={{ padding: '20px' }}>
          
          <InputLabel>Upload a resume file</InputLabel>
          
          <Input
            type="file"
            onChange={handleFileChange}
            inputProps={{ accept: '.pdf,.doc,.docx' }}
          />
          {selectedFile && selectedFile.name && (
            <Typography variant="body1" sx={{ mt: 1, fontWeight: 'bold', color: 'text.primary' }}>
              {selectedFile.name}
            </Typography>
          )}
        </FormControl>
      </FormControl>
      <DialogActions>
        <Button onClick={onCancel} color="grey" variant="contained">
          Cancel
        </Button>
        <Button onClick={handleSubmit} color="primary" variant="contained">
          Next
        </Button>
      </DialogActions>
    </>
  );
}

I have tried other methods as suggested but I am unable resolve the issue.

I am trying to submit data to my API as I am doing it by selecting a resume from dropdown no such error is showing, it is also because in this case I am just passing resumeId but whenever uploading a file this error shows up.

Answer 1

Check res.data in fetchResume function. It is probably an object, not an array