import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [company_id, setCompanyID] = useState('Test1');
  const [created_by, setCreatedBy] = useState('pablo');
  const [qrcode_color, setQRCodeColor] = useState('#ff0000');
  const [link, setLink] = useState('https://lenovo.com');
  const [description, setDescription] = useState('This is a qrcode');
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const apiUrl = 'https://www.qrcodereviews.uxlivinglab.online/api/v2/update-qr-code/13124568296138084846/';
    const apiKey = '';

    const payload = new FormData();
    payload.append('company_id', company_id);
    payload.append('created_by', created_by);
    payload.append('qrcode_color', qrcode_color);
    payload.append('link', link);
    payload.append('description', description);
    if (file) {
      payload.append('logo', file);
    }

    axios.put(apiUrl, payload, {
      params: {
        api_key: apiKey,
      },
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
      .then(response => {
        console.log('Request successful:', response.data);
      })
      .catch(error => {
        console.error('Request failed:', error);
      });
  };

  return (
    <div>
      
         setCompanyID(e.target.value)} /&gt;
         setCreatedBy(e.target.value)} /&gt;
         setQRCodeColor(e.target.value)} /&gt;
         setLink(e.target.value)} /&gt;
         setDescription(e.target.value)} /&gt;
        
        <button type="submit">Submit</button>
      
    </div>
  );
}

export default App;