Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

442
Views
How to pass input data from ReactJS to Flask-Python (Backend)

I'm trying to build a directory website with ReactJS as a frontend and Python Flask as a backend. I'm trying to pass the text inputs in my searchbar.js to my Python script but I cant find a way to display the data that I've passed from the frontend in my backend to make sure I've really passed the data.

Here's my searchbar.js where I tried storing the data in a variable and had that passed to the api route i've made in python.:

function SearchBar() {
  const [searchedText, setSearchedText] = useState("");
  let navigate = useNavigate();

  const onSearch = () => {
    navigate(`/search?q=${searchedText}`);
    fetch('/ML/search',{
      method: 'POST',
      body: JSON.stringify({
        content:searchedText
      })
    })
  };
  return (
    <div>
      <Input.Search
        placeholder="Enter keyword..."
        onChange={(e) => {
          setSearchedText(e.target.value);
        }}
        onSearch={onSearch}
        onPressEnter={onSearch}
        enterButton></Input.Search>
    </div>
  );
}
export default SearchBar;

here's my api route in python for fetching the data that was passed from my frontend:

@app.route('/ML/search', methods=['POST'])
def search():
    request_data = json.loads(request.data)
    searchData = request_data['content']
    return searchData

So basically what I want to happen is I want to pass the input in my searchbar.js to my Python backend and store it as a variable so I could use that variable to search a column in SQL

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You can use below code to print the data back to console.

  const onSearch = () => {
    navigate(`/search?q=${searchedText}`);
    fetch('/ML/search',{
      method: 'POST',
      body: JSON.stringify({
        content:searchedText
      })
    }).then(response => response.json()
      .then(data => ({ data, response })))
      .then(({ data, response }) =>  {
        console.log(data)
      })
  };



about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!