Develop Reference

React Refs are null after rerender

I'm new to React and I have the following react components that I'm using in a Blazor WASM App.
// Parent
export class Parent extends React.Component{
constructor(props){
super(props);
this.childRef = React.createRef();
// saving reference to component to access it using Blazor JS Interop
window.canvasComponentRef = this
}
render(){
return <Child ref={this.childRef} />
}
parentFoo = () => {
this.childRef.current.foo();
}
}
// Child
export class Child extends React.Component{
constructor(props){
super(props);
}
render(){
return <div> Content </div>
}
foo(){
// some actions in child
}
}
I render the component using...
ReactDOM.render(Parent, document.getElementById('root'));
Result: childRef.current work
When the user navigates away from the Parent component page, I unmount it manually using...
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
When the user comes back to the Parent component page, I render it again using...
ReactDOM.render(Parent, document.getElementById('root'));
Now, when I call window.canvasComponentRef.parentFoo(), childRef.current is null.
Can anyone explain why?
Thank you!

My issue was actually the global variable at
// saving reference to component to access it using Blazor JS Interop
window.canvasComponentRef = this
After refactoring it to get a ref to the Parent component using callback refs as below, the issue got resolved.
let parentRef = null;
function handleRef(element){
parentRef = element;
}
function renderParent(){
const parent = <Parent ref={this.handleRef}/>
ReactDOM.render(parent, document.getElementById('root'));
}
// Now call parent method like below:
function callParentFoo(){
parentRef.parentFoo();
}

How to set variable from parent inside child's componentDidMount react?

I am trying fetch the information from Api request in child component. The problem is that I have faced accessing parent's props. More precisely how to get parent's props and set it inside componentDidMount()?
Parent component
class Parent extends Component {
constructor(){
super()
}
...
<Child id={id}/>
...
export default Parent;
Child component
class Child extends Component {
constructor(){
super()
this.state = {
id:'',
}
}
// I need somehow set parent's "id" inside the url
componentDidMount() {
const url = `https://api.../${id}?api_key=${apiKey}`;
axios.get( url )
...
};
render(){
const { id } = this.props;
console.log('Child id ' + id) // here I see all ids
return(
<div className="item" key={id}>
<p>{id}</p> // here as well
</div>
)
}
}
Child.propTypes = {
item: PropTypes.object
}
export default Child;
Maybe I am looking for in the wrong place and I need just change logic.
I will be grateful for any advice

To access props from anywhere in your Child component you need to pass props to your constructor, then you just access it using this.props.
This should work:
class Child extends Component {
constructor(props){
super(props)
this.state = {},
}
componentDidMount() {
const id = this.props.id
const url = "https://api.../$" + id + "?api_key=${apiKey}";
axios.get( url )
...
};
}

If you have a constructor in a component the props should always be passed to the constructor and also to React component using super()
constructor(props){
super(props)
}
In your case if you have to use your parents props you should also pass the parents props to child also and with same syntax in constructor you can use props that you passed in anywhere of the child component and you can set that props in componentDidMount as well

Reactjs pass variable to function from another class

Request.js
export default class Request extends React.Component {
getForm(e) {
let v = validator(document.getElementById('myinput')); // here is should call function from another class
}
render(){
return(
<form onSubmit={this.getForm.bind(this)}>
<RequestValidator/> // here is I called second class
<Input id="myinput" value="65"/>
</form>
}
}
}
RequestValidator.js
export default class RequestValidator extends React.Component {
validator = (e) => { // here is the target function
console.log(e.value);
}
}
What I want to do is, pass a variable (#myinput value) from Request compontent class to a function (validator) in another compontent class (RequestValidator).
What I have done so far is above codes, but I got error:
'validator' is not defined no-undef

You can do that using ref. You create one in your parent component:
class Request extends React.Component {
constructor(props) {
super(props)
this.requestValidatorRef = React.createRef();
}
then you pass it to the child component:
<RequestValidator ref={this.requestValidatorRef} />
at this point you should be able to call your method like this:
getForm(e) {
this.requestValidatorRef.current.validator(e) // ...
}

If you want to pass parameter to another class in reactjs you should use props. Also variable in requestvalidator class have to use prop name. But in your case RequestValidator and Input components are different.
In main component class call like this:
<UserInput
titles={this.state.titles}
/>
In UserInput component use this prop like this:
class UserInput extends React.Component {
componentDidMount() {
console.log(" titles from main class:", this.props.titles);
}
}

How to pass an Array and access it within React Lifecycle

I'm using Mongo/Meteor 1.3/React. In my simple example I use an wrapper React component to query the Mongo collection and create an Array. When passing to the Child component, it seems like the Array object is not ready when constructor is called - meaning I can't access the props.
This feels like it must be a common problem. Should I be using a different React Lifecycle Component? Or adding some form of waitOn function? Any advice appreciated!!
Parent Component
export default class BulkMapWrapper extends TrackerReact(React.Component) {
constructor() {
super();
const subscription = Meteor.subscribe("listing",{sort: {_id:-1}})
this.state = {
eventsData: subscription
}
}
render () {
var markerArray = []
markerArray = ...
return(
<div className="panel panel-default">
<div className="panel-body">
<FourthMap
mapParams = {manyEvents}
markers = {markerArray}
/>
</div>
</div>
)
Child Component
export default class GooleMapComponent extends Component {
constructor(props){
super(props)
console.log(this.props.markers);

You should use the componentDidMount function to get the data and then set a new state with the resulting data.
class GetData extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
const subscription = Meteor.subscribe("listing",{sort: {_id:-1}});
this.setState({
eventsData: subscription
});
}
}
You can then pass down the state from the GetData component as props to its children or explicitly to another component in the render function.
This is generally how you should handle AJAX requests in React but I'm not sure if this will translate well to use in Meteor.

How do you test an abstract class in Enzyme and/or pass implicit variables?

I have a base class that's being extended by several components, and inside that base class, there's an implicit variable that is being passed in from the classes that are extending it. For instance, I have the following as the base class:
export default class BaseCard extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
return (
<div>
{this.hasData && <span> Has Content </span>}
</div>);
}
}
And the component that extends the BaseCard:
export default class MyCard extends BaseCard {
constructor(props) {
super(props);
this.hasData = true;
}
render() {
return (
<div>
MyCard content
</div>);
}
}
this.hasData is defined inside the MyCard component, but since I'm testing BaseCard, it's not defined inside the class, and therefore, I can't test parts of the DOM that depend on that variable being there. How can I pass it in when testing with Enzyme?

You can set the variable on the instance like this:
const wrapper = mount(<MyCard />);
wrapper.instance().hasData = true;