I am trying to display list of forms against task id. I have put link inside button tag in Fetch.js file so that as soon as the button is clicked GetForm component should be rendered conditionally. But what actuallyhappening is that URL changes but component is not rendered.I am unable to understand that where I am messing up with the code.How can I render a GetForm component on button click?
Here is the routes.js file.
import React from "react";
import CreateForm from "./Component/CreateForm";
import GetForm from "./Component/GetForm";
import Nav from "./Component/Nav";
import {Route , Switch , Redirect} from "react-router-dom";
import Fetch from "./Component/Fetch";
import './Component/App.css';
import Home from "./Component/Home";
export const Routes=()=>{
return(
<div>
<Nav/>
<Switch>
<Route exact path="/createForm" component={CreateForm}/>
<Route exact path="/tasks" component={Fetch}/>
{/*<Route exact path="/tasks/:tID/forms" component={GetForm data={Forms} tID=
{taskID}}/>*/}
<Route exact path="/" component={Home}/>
</Switch>
</div>
);
}
Here is Fetch.js Component
import React, { useState, useCallback, useEffect } from 'react';
import {BrowserRouter as Router,Switch,Route,Link,useParams,useRouteMatch , withRouter} from "react-
router-dom";
import './App.css';
import GetForm from "./GetForm";
import $ from 'jquery';
import Home from "./Home";
const apiURL= 'https://app.arrivy.com/api';
export default function Fetch (){
let { path, url } = useRouteMatch();
console.log(path);
const [taskID , setTaskId] = useState(5533754916864000);
//if button true call getform class component
const [buttonClick, setbuttonClick] = useState(false)
//array of objects
const [Forms , setForms] = useState([{}]);
const fetchData = () => {
console.log((taskID));
const tid = taskID.toString();
const Url = `https://app.arrivy.com/api/tasks/${taskID}/forms`;
console.log(Url);
return new Promise((resolve, reject) => {
$.ajax({
url: Url,
async: false,
headers:{ 'X-Auth-Key':'2071b15a-0a29','X-Auth-Token':'dSltkKwc5YRGk5Fo9c96L4','Content-
Type':'application/x-www-form-urlencoded' },
type:'get',
dataType:'json',
success:function(result){
console.log('Success:' + result);
setForms(result);
setbuttonClick(value => !value);
/// console.log(Forms);
//console.log(buttonClick)
//// setTimeout(() => { console.log(Forms); console.log(buttonClick); },2e3);
},
error: function (error) {
reject(error)
},
})
})
};
const handleSubmit=(evt)=>{
evt.preventDefault();
console.log(Forms);
alert (`task id: ${taskID} found`)
}
return (
<div>
<form class="Form" onSubmit={handleSubmit}>
<label>
TASK ID
</label>
<br />
<input type="text"value={taskID}
placeholder={"Input task ID here"}
onChange={e => setTaskId(e.target.value)}
required
/>
<button className="button"
onClick={fetchData}>
<Link to={`/tasks/${taskID}/forms`}>get form</Link>
</button>
{<li>{buttonClick}</li>}
</form>
<Switch>
<Route path="/tasks/:taskID/forms" exact component={buttonClick? <GetForm data=
{Forms} tID={taskID}/>:null}/>
</Switch>
</div>
);
}
Here is GetForm Component
import React , {useState , useEffect} from 'react';
import RenderForm from "./RenderForm";
import $ from 'jquery';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useParams,
useRouteMatch
} from "react-router-dom";
function GetForm({ data, tID }) {
const [formDetails , setformDetails] = useState([{}]);
const [formID, setFormID] = useState();
const [masterformID , setMasterFormID] = useState();
//single JSON object//single label
const [resultdata , setResultdata] = useState({});
const [buttonClick , setbuttonClick] = useState(false);
const showForm = (tID, id) => {
setFormID(id);
return new Promise((resolve, reject) => {
const Url=`https://app.arrivy.com/api/tasks/${tID}/forms/${id}`;
$.ajax({
url: Url,
async: false,
headers:{ 'X-Auth-Key':'2071b15a-0a29','X-Auth-
Token':'dSltkKwc5YRGk5Fo9c96L4','Content-Type':'application/x-www-form-urlencoded' },
type:'get',
dataType:'json',
success: function (result)
{
console.log('Success:');
// console.log(result);
setResultdata(result);
console.log(resultdata);
setformDetails(result.content);
setbuttonClick(value=>!value);
},
error: function (error) {
reject(error)
},
})
})
}
return (
<div>
{
data && data.length > 0 && data.map((d) => {
if (d.master_form_id != null) {
return (
<div key={d.id}>
<div className="container">
<button class="button"
onClick={() => showForm(tID, d.master_form_id)}>
{/*<Link to={`tasks/${tID}/forms/${d.master_form_id}`}>{d.title}
</Link>*/}
RENDER FORM
</button>
</div>
</div>
)
}
else {
return (
<div key={d.id}>
<div className="container">
<button className="button"
onClick={() => showForm(tID, d.id)} >
{/*<Link to={`tasks/${tID}/forms/${d.id}`}>{d.title}</Link>*/}
RENDER FORM
</button>
</div>
</div>
)
}
})
}
{/* <Switch>
<Route exact path="/tasks/:taskID/forms/formID" component={buttonClick ? <RenderForm taskID={tID} formID={formID} result={resultdata} content={formDetails} /> : null}/>
</Switch>*/}
</div>
);
}
export default GetForm;
Here is Nav component
import React from 'react';
//import './App.css';
import {Link, withRouter} from 'react-router-dom'
function Nav() {
const navStyle={
color:'blue'
}
return (
<nav className="main">
<h1>To do List</h1>
<ul className="nav-links">
<Link style={navStyle} to="/createForm">
<li>Create Form</li>
</Link>
<Link style={navStyle} to={"/tasks"}>
<li>Get Form</li>
</Link>
</ul>
</nav>
);
}
export default Nav;
