Resolved: React language issues with it's versions

In this post, we will see how to resolve React language issues with it’s versions

Question:

I am learning to react. I found that I need to install some package to use anything. Does React and Node installation comes empty [No library as we have in Java]?
I am using react-router and react-router-dom version 6.8.0 so that “Routes” can work properly. To use {withRouter}, I need to downgrade the version to 5.2.0.
If I do that, then “Routes” don’t work.
Any clarification on how to use React as a front-end language? Or Angular or another language is better?
Here is the code. I want to move to Restaurants1.js from SearchWindow.js on clicking some link.
App.js:

import './App.css';
import Dashboard from './components/Dashboard';
import Restaurants1 from './components/Restaurants1';
import {Routes, Route} from 'react-router-dom';
import { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <>
         <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/restaurants" element={<Restaurants1 />} />   
         </Routes>
      </>
   );
  }
}

SearchWindow.js:

export default class SearchWindow extends Component {

    const newTo = { 
        pathname: "/restaurants", 
        param1: "Par1" 
    };

    const stationsDropDown = (
         <View>
             <Dropdown
                 data={this.state.enableStations ? this.state.stations : undefined}
                    style={styles.dropdown}
             />
                
            <Link to={newTo} className="btn btn-primary">Order Food</Link>
       </View>
    );
}

Restaurants1.js:

import React, { Component } from 'react';
import {View,FlatList, Text, StyleSheet, Image} from 'react-native'; 
import Row from './Row'; //If it's on the same folder
import { useLocation, useParams } from "react-router-dom";
const image1 = require('../assets/icondelivery.PNG')
const image2 = require('../assets/icondelivery.PNG')


var data1 = [{title:"You image title", image: image1}, {title:"Your Image title",image: image2}]

class Restaurants1 extends Component{
    constructor(){
        super();
        console.log("this.props = "+this.props.useParams);
    }

   render(){
        return(
            
            <View>
                
                <FlatList
                    style={{flex:1}} //Don't forget this too
                    data={data1}
                    renderItem={({ item }) => <Row {...item}/>}
                    
                                    
                />
            </View>
        )
    }
  
}
export default () => (
    <Restaurants1 params={useParams()} location={useLocation()} />
  );

Not able to get value of param1 in Restaurants1.js.

Best Answer:

So, finally, solved.
Restaurant1.js:

import React, { Component } from 'react';
import withRouter from './withRouter';

class Restaurants1 extends Component {
    constructor() {
        super();
    }
    render() {
        console.log("this.props.params = " + this.props.location.state.param);
        return (
            <div />
        )
    }
}
export default withRouter(Restaurants1);

withRouter.js:

import { useLocation, useParams,} from 'react-router-dom'; 
const withRouter = WrappedComponent => props => {
    const location = useLocation();
    const params = useParams();
  
    return (
      <WrappedComponent
        {...{props, params}}
        {...{ location, params,}}
      />
    );
  };
  export default withRouter;

SearchWindow.js:

<Link to="/restaurants" state={{param: "value"}} className="btn btn-primary">Order Food</Link>

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Resolved: React language issues with it’s versions

Question:

Best Answer:

Related