We Keep Coding

Can I use the variables declared in useEffect inside of my render in reactstrap?

I have a useEffect hook in my navbar:
const spoon = localStorage.getItem("true");
useEffect(() => {
console.log(spoon")
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', `https://server.com/${spoon}`, false);
xmlHttp.setRequestHeader('AO', `Password ${PASS}`)
xmlHttp.send()
console.log(xmlHttp.response)
var data = JSON.parse(xmlHttp.response);
console.log(data["user"]["avatar"])
}, []);
Now when the user logs in, I trigger a request within the navbar to retrieve the users avatar, however, I only want to do this once so I use useEffect as if I do not, navigating between pages becomes slow as each click to take the user to a new page triggers another http get request in the navbar.
Now the useEffect does work, except now I believe am unable to use the data variable outside the scope(?) which means that in the navbar render I am unable to render the users avatar. Is there a way around this? Or am I able to use variables declared inside of useEffects in my render? Here is a snippet of my navbar render code:
return (
...
<DropdownToggle
caret
color="default"
nav
onClick={(e) => e.preventDefault()}
>
<div className="photo">
<img
alt="..."
src='{data["user"]["avatar"]}' /*<-I need the data variable here so I can get the users avatar
from request*/
/>
</div>
<b className="caret d-none d-lg-block d-xl-block" />
<p className="d-lg-none">Log out</p>
</DropdownToggle>
)

You can't use variables from inside the useEffect within the render. If you want to use things from within the useEffect you have two options:
Create state for the data i.e. useState however that will trigger a re-render, if that's what you want.
Use a ref i.e. useRef() this can be used to have a variable that is persisted through out the renders. However changes to the ref will not trigger a re-render see: https://reactjs.org/docs/hooks-reference.html#useref
Given you are using the data in a src you will have to use state to allow changes to data to re-render the component.

Unable to render component in a new page on a new route on button click

I am very new to react and just started to build a basic crud application with it. Everything is done besides the update functionality, i got stuck there.I have several bootstrap cards with 2 buttons , delete and update.The data comes from a mysql database and was persisted with hibernate (spring boot on backend).The update button when pressed should pass the id and render a new component(on a different route, guess i need to use Link here) in which a filled form with the respective objects details is presented. Once the user updates the form and clicks submit, he should be redirected to the Cards page. So far i am stuck at the button + Link and rendering the new component phase and for some reason i can't seem to understand how to make it work.This is my code so far
this is my JSX in which i have the Update button which is in the render method of CarList component which has all the cards.
<ReactBootstrap.Card.Body>
<ReactBootstrap.Card.Title>{cars.mark}-{cars.model}</ReactBootstrap.Card.Title>
<ReactBootstrap.Card.Header>Price: {cars.price}</ReactBootstrap.Card.Header>
<br />
<h6>Fabricated: {cars.year}</h6>
<h6>{cars.fuel}</h6>
<ReactBootstrap.Button variant="success" className="cardButtons" id="cardButtonGreen" onClick={() => this.handleClickUpdate(cars.id)}> Update</ReactBootstrap.Button>
<ReactBootstrap.Button variant="danger" className="cardButtons" id="cardButtonRed" onClick={() => this.handleClickDelete(cars.id)}> Delete</ReactBootstrap.Button>
</ReactBootstrap.Card.Body>
</ReactBootstrap.Card>
</div>
}
<br />
</div>
this is my CarList class and the constructor
class CarList extends Component {
constructor(props) {
super(props)
this.state = {
cars: [],
error: "",
deleteError: "",
updateError: "",
updateCarId: null,
buttonWasPressed: false
}
}
here i have the function that is triggered on click.I am sating the state to the id of the object that is in that specific card where the update button is.
handleClickUpdate = (carId) => {
console.log(carId);
this.setState(
{
updateCarId: carId,
buttonWasPressed: true
}
)
}
and lastly i am rendiring the Component MyComp i want to render by passing in the ID.Line is located in component CarList right under where the Card is.
{this.state.buttonWasPressed && <MyComp carId={this.state.updateCarId} />}
What this code gives me so far, is that i am able to set the state as the id, and then use the button to display the component, but it is displayed on the same page, right under the card (where the line of code is also located) instead of displaying it in a new page on a new route.I have tried adding Link,Switch, Route, Router, but i am afraid i am not sure how to use it in this exact context with the button, and it is confusing to me so i was not able to make it work.Can you please help me render "MyComp" on a new page with that id ?
Any help would be greatly appreciated.

what you need is a global store, such as Redux or Mobx. That way you can update the state with relevant data and retrieve them on the new page.
If you need a workaround, you could use history.pushState()
Basically you can push to your location and with it a state.
And on the next page, which is MyComp in this case, you could use history.state to retrieve the pushed data.

multiple nav link for a component render each click using reactjs

I am facing a problem in route how to render the same component in multiple nav link.
I have 2 nav link like this. when I click on edit product, the component render with detail successfully. After that, I click on add a product then component does not render again because component already rendered on the edit product link.
I am using the same component for add and edit.
Anyone can tell me how to Re-render that component on the next click.?
Thanks in advance
<Route
path="/addproduct"
render={() => {
return userData.is_superuser === true ? (
<Product />
) : (
<Redirect to="/dashboard" />
);
}}
/>
<Route path="/editproduct/:id" component={Product} />

Try using render property as follows
<Route path="/editproduct/:id" render={() => <Product/> } />
did you wrap your routes with Switch component?
Just an extra info, you should take a look at react lazy/suspense, is used for code splitting, is useful for decreasing SPAs load times.

I found how to resolve this problem.
You need to use componentWillReceiveProps function in your component.
clicked a link first time by calling url www.example.com/content1/ componentDidMount() is run.
Now when you click another link say www.example.com/content2/ same component is called but this time prop changes and you can access this new prop under componentWillReceiveProps(nextProps) which you can use to call API Or make state blank and get new data.
componentWillReceiveProps(nextProps){
//call your API and update state with new props
}

Semantic UI React, Dropdown Selection

Please take a look at my code for Dropdown,
I'm using the semantic ui react dropdown on an EditProfile component. I have pasted a sample code here, https://codesandbox.io/s/m4288nx4z8, but I could not get it to work because I'm not very familiar with functional components in React, I've always used Class component. But you can check the full code for the whole component below in the github gist.
https://gist.github.com/mayordwells/b0cbb7b63af85269091f1f98296fd9bb
Please, I need help on inserting values from multiple select options of a Dropdown into the Database and also a way to display that back upon viewing the profile edit page again.
I'm using semantic-ui-react in react + rails app.
Also when I insert a value using a normal drop down without multiple select, the value gets persisted into the database.
<Dropdown
placeholder='Select Country'
fluid
search
selection
options={countryOptions}
name='country'
defaultValue={this.state.extraInfo.country}
onChange={(e) => this.handleExtraInfoChange('country', e)}
/>
This code handles change for the dropdown elements.
handleExtraInfoChange = (name, event) => {
let value;
if (event.target.value !== undefined) {
value = event.target.value;
} else {
value = event.target.textContent;
}
let newExtraInfo = Object.assign(this.state.extraInfo, { [name]: value })
this.setState({ extraInfo: newExtraInfo});
}
But when I visit the page again, I get a white blank in the input box. Here's a screen pic for that. When I comment out the defaultValue or value property(i have tried with defaultValue and value), the white blank disappears, but the value picked by a user is also not seen.
Please advice what is a possible solution to this misbehavior? And what is the best way to insert multiple values into the Database?
Thanks in advance for your time.

A functional component does not have state, it's used for composition; you want to store state, so you either have to create a Component class or you need an external state container like redux.

React.JS, pass data between components

very new to react. you can say I have not yet started to think like React.
here is the problem:
<div>
<DropDown> </DropDown>
<Panel> </Panel>
</div>
In the dropdown, I select a value. Store it in state, as something as , currentLocation.
Then I go to Panel, hit a button, and I want to open a modal. When i open a modal, I need to pass the currentLocation to that model.
I can pass in arbitrary value to modal, but I cannot figure out a way to get the currently selected item from DropDown.
How do I get the value of the currently selected item to the Panel?
Am I even making sense?

When you call the setState in the dropdown that will force an update of the page.
Then if you call this.state in your component you should have the value you need there.
You should go over the basic tutorials to grasp the react basics.
But it goes like this:
getInitialState: function() {
return {
myVar: ''
//set your variables here
//getInitialState will get called before the component gets mounted
};
},
myCustomFunction: function(newVariable) {
this.setState({
myVar: newVariable
});
},
render: function() {
return (
<div>
<input
onChange={this.myCustomFunction}
/>
<MyCustomComponent myProp={this.state.myVar}/>
//everytime the state changes MyCustomComponent will have that new value as a prop
</div>
);
}

There is a lot of ambiguity in your question but I'll try for the simplest case.
You have a Panel component and a Dropdown component.
You want to the Panel to have access to a value that was set when the Dropdown was used.
Solution: When the Dropdown is actuated, it creates an Action that Stores the selected value.
When the modal button in the Panel is actuated, it creates an Action that requires the DropDownStore. Then it decides what to do based on that value.
The pattern I am loosely describing is known Facebook's Flux architecture which is basically just a more specific application architecture for React applications similar to pub/sub or an event bus.