1

in react js I made a simple date picker and select date from the dropdown calendar and I displayed it in the console.

that date stored in a variable, now how to use that variable in URL

My questions :

  1. How to pass parameter in React js URL

  2. how to print parameter in console log

code:

import React, { Component } from 'react'
import axios from 'axios'
class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            key: '',
            
        }
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = e => {
        e.preventDefault()
        console.log(this.state)
        axios
            .get('http://127.0.0.1:8000/hvals_hash?key=31/8/21')
            .then(response => {
                console.log(response)
            })
            .catch(error => {
                console.log(error)
            })
    }

    render() {
        const { key } = this.state
        return (
            <div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />
                    </div>

                    <button type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

export default PostForm

A date is from date picker form , so pass date dynamicall how to do that

Improve this question

2 Answers 2

Reset to default
2

You can use template literals to pass dynamic values as follows.

componentDidMount(){
    const date = "20/8/21";
    axios.get(`http://127.0.0.1:8000/hvals_hash?key=${date}`)
    .then(response => {
        this.setState({
            posts:response.data
        })
        console.log(response.data)


    })
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0 
 import {
  BrowserRouter,
  useParams,
  Route,
  Routes,
  Link,
} from 'react-router-dom';

page:send.jsx  =>

  <Link to="/get" state={{ from: "test" }}>
        test
        </Link>
page:get.jsx

import {
  BrowserRouter,
  useParams,
  Route,
  Routes,
  Link,
  useNavigate,
  useLocation,
} from "react-router-dom";

  const location = useLocation();
const { from } = location.state ? location.state : "null";
  console.log(from);

send:
  const { navigate } = useNavigate();
  navigate("/get", { state: { from: "test" } });
get:
  const location = useLocation();
  const { from } = location.state;
  console.log(from);
Improve this answer

1 Comment

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.