Develop Reference

Cannot access React props in state

I'm passing some data from parent to children like the following
<Children title={title}/>
Inside the children I have a state like this :
const [state,setState] = useState(title ? title : '')
Problem is, when accessing the title directly like this {title} it's working, accessing state on the other hand does not work. Should I useEffect for this to get data from parent when the state is loaded ?

You need to use useEffect hook here. because useState is basically used to initialize the value and not to update.
useEffect(() => {
setState(title);
}, [title]);
Because the problem with your approach is that when you do -
const [state,setState] = useState(title ? title : '')
This will set your state variable to ''(empty string) because on the initial render of your child component there is no guarantee that you are going to get the value of title.
And when you get the value of title in your props. useState will not detect it.
So therefore to detect a change in your props and to setState based on updated props its recommended to use useEffect.

Access the props in the children component like this -
function childComponent(props) {
//props.title -- access it in your component.
}
But what you're trying in your code is not recommended, you can't mutate the state of props. Read React docs

This is the correct implementation of this;
<ClassA title = "class a"/>
function ClassA(props){
// access the title by calling props.title
}

passing parameter to another component using Link in react

I know if I need to call another component then we need to pass like <A x={y}/> and we can access props.x inside A.
But here I need to call EditCertificate so I need to pass id to EditCertificate. but I am using Link here. I am not able to pass the id. when I am accesssing it, it is coming undefined.
<Link to={`/${props.certificate.id}/edit` } >Edit</Link>
and I am calling this page like below.
<Route path ="/:id/edit" component={EditCertificate} ></Route>
how can I access :id inside the EditCertificate .when I am accessing it is giving undefined. do I need to pass some other properties.

Since EditCertificate is rendered directly by the route:
<Route path ="/:id/edit" component={EditCertificate} />
the route props are passed to EditCertificate. You just need to access them from props.
const { id } = props.match.params;
if EditCertificate is a class component, then obviously access from this.props.
const { id } = this.props.match.params;

since you're using react-router you can simply import useParams hook and get the id in you EditCertificate component
import { useParams } from 'react-router-dom';
const { id } = useParams(); // add inside your component body

Getting Global Access to URL ID Params

How do I get global access to the current URL ID params? I'm having trouble getting access to the current URL ID in a child component in React. The ID is needed in order to query a MongoDB database in my ChecklistTool component.
Normally, I'd pass the props and get access to params that way. However, I'm using Editor.js which is not letting me pass the props as required.
This is my Editor.js component. It has access to params information:
<EditorJs
instanceRef={(instance) => (instanceRef.current = instance)}
placeholder="Start typing what's in your head..."
tools={EDITOR_JS_TOOLS}
enableReInitialize={true}
data={data}
/>
This is my custom Checklist component which is rendered as a block inside of the Editor.js component. I'm unable to pass the URL params to this component:
<ChecklistTool
onDataChange={onDataChange}
readOnly={this.readOnly}
data={this.data}
isAdmin={true}
/>
This is the file where I'm using React Router:
<Router>
<Switch>
<Route exact path="/document/:id" component={DocumentView}/>
</Switch>
</Router>
Any idea how to get access to the current URL params ID in all required files? Thanks!

If you are using a version of React >= 16.8 then you can use hooks.
Instead of using props to pass the value, React-Router provides a hook called useParams which enables you to access the URL params from within any component (as long as it is wrapped inside the router), which makes it essentially global and accessible from any child without passing as props.
This is how you use it:
First you import useParams
import {useParams} from "react-router-dom";
Then call the hook
const params = useParams(); //:id param will be in params.id and so on...
If you have tried this approach and did not work for you, let me know more about the kinds of errors you received, if any, and I will look into them.
React-Router reference for more information about useParams hook.

Can I use React-Router-Dom useParams() to capture a coupon code in a MERN Application?

I have been trying to figure out to how to capture a coupon code using react-router-dom's URL Parameters. I was hoping to be able to capture a coupon in the URL to set a state.
Example: https://localhost:3000/checkout?coupon=FREE3000&referrer=MATTHEW;
I want to be able to parse the URL to take the parameters Coupon & Referrer to set in the state, and to prefill a form in a checkout page.
Is this possible using React Router Dom? Are there any alternative solutions?

Yes this is possible via react router with a custom hook and the useLocation hook. Anyways you will use URLSearchParams. There is no direct function from react router.
const useQuery = () => new URLSearchParams(useLocation().search)
// use in component
const query = useQuery();
// get desired value with query.get(name)
const coupon = query.get("coupon");
const referrer = query.get("referrer");
Refer to this example from the react router docs
If you want to not use react router simply use the window.location.search property instead of useLocation. See the MDN documentation

The short answer is no, useParams gets the parameters after the base url not the query parameters.
For an answer on how to get the query parameters see this question How to get query parameters in react-router v4

React extract param from url

I'm using react-router for routing . I've used NavLink and Route components like this:
<NavLink className={classes.navLink}
activeClassName={classes.activeNavLink}
to={`/brokers/${n.id}`}\>
....
<Route exact path="/brokers/:id" component={BrokerDetails} />
Now my question is - how do I use the id parameters passed in inside the BrokerDetails component ? I tried reading it via the props but it doesn't exist .

When using component=..., your component will be passed the route props.
In particular, you'll want to access the match object:
const BrokerDetails = ({match}) => <div>{JSON.stringify(match.params)}</div>;
should show you all the parameters; match.params.id would be the id parameter.

If you try to access props.Id won't work because it isn't in that location.
When you try to access params from an URL, which is passed using 'React-router-dom', then the way to access the props is match.params.id