0

I am sending request from react to django to know if we've this user or not. django is sending response back but it's not even showing in console in react.

here is my React Code:

const BASE_URL = 'http://127.0.0.1:8000/writer-login/'

function TeacherLogin() {
    const[writerLoginData, setWriterLoginData] = useState({
        'writer_email' : '',
        'writer_password': ''
        });

    const handleChange = (event) => {
    setWriterLoginData({
        ...writerLoginData,
        [event.target.name]:event.target.value
    })
    }

    const submitForm = () => {
        const writerLoginFormData = new FormData();
        writerLoginFormData.append('writer_email',writerLoginData.writer_email)
        writerLoginFormData.append('writer_password',writerLoginData.writer_password)

        try {
            axios.post(BASE_URL,writerLoginFormData).then((res) => { 
                console.log('Found')
                console.log(res.data)
                if(res.data === true) {
                    localStorage.setItem('writerLoginStatus',true)
                    window.Location.href="/writer-dashboard";
                }
            })
        } catch (error) {
            console.log(error)
        }

    }
    const writerLoginStatus = localStorage.getItem('writerLoginStatus')
    if(writerLoginStatus === 'true'){
        window.Location.href="/writer-dashboard";
    }
    return (
        <div className='App'>
            
                            <Form.Label>Email address</Form.Label>
                            <Form.Control value={writerLoginData.writer_name} onChange={handleChange} name ="writer_email"  type="email" placeholder="Enter email" />
                            <Form.Text className="text-muted">
                            We'll never share your email with anyone else.
                            </Form.Text>
                        </Form.Group>

                            <Form.Label>Password</Form.Label>
                            <Form.Control value={writerLoginData.writer_password} onChange={handleChange} name ="writer_password"  type="password" placeholder="Password" />
                        
                        <Button onClick={submitForm} variant="success me-5" type="submit">Login
                        </Button>
    );
}

export default TeacherLogin;

here is my django code:

@csrf_exempt
def WriterLoginDetails(request):
    writer_email = request.POST['writer_email']
    writer_password = request.POST['writer_password']
    writerData = models.Writer.objects.get(writer_email = writer_email, writer_password = writer_password)
    if writerData:
        print('data found')
        return JsonResponse({'bool':True})
    else: 
        print('no data found')
        return JsonResponse({'bool':False})

I have tried to console it in browser and even in network but I am not getting anything

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
  • Can you change the onchange of button as follows onClick={()=>submitForm()} – Ajay Ghosh Jan 17 '23 at 11:28
  • Not sure if this solves your problem, but when the axios.post() promise is rejected, you should add a .catch() callback instead of wrapping your post call in a try catch. (https://www.freecodecamp.org/news/javascript-promise-methods/) The try except blocks only catch error that occur when calling axios.post(), but no errors that occur when resolving the promise. – Nico Griffioen Jan 17 '23 at 11:29
  • Which Form library are you using? – Ajay Ghosh Jan 17 '23 at 11:30
  • So if you `console.log(res)` to see the whole response, what do you get? – michjnich Jan 17 '23 at 11:31
  • @michjnich showing data in console for like half second – Mubi Rai Jan 17 '23 at 11:34
  • @AjayGhosh if i will use onClick. i wont be able to use value parameter. i think and i am using react bootstrap. just deleted my form code to short the code here – Mubi Rai Jan 17 '23 at 11:39
  • window.Location.href="/writter-dashboard"; Can you comment this and check if the response is proper seen in console – Ajay Ghosh Jan 17 '23 at 11:42
  • or tick the preserve logs option in above the console Refer https://stackoverflow.com/a/50977830/9586519 – Ajay Ghosh Jan 17 '23 at 11:44
  • @AjayGhosh it's showing this data in console now {bool: true} – Mubi Rai Jan 17 '23 at 12:00
  • Now you can do what ever you want to do – Ajay Ghosh Jan 17 '23 at 14:30

0 Answers0