Question

190

In React, how to add a URL string as an object's property, from a Link or other component

rated 0 times [ 194] [ 4] / answers: 1 / hits: 15398 / 5 Years ago, sat, march 30, 2019, 12:00:00

In React, I'm setting an object's URL property (specifically, amcharts chart bullet.url), which is a string, to ../members/{member.name} It renders with no issues. Clicking the link navigates to the page correctly. However, it seems all the previously loaded states need to be reloaded. Is it a new React session?

I've tried setting the property using various expressions using Link. But none seem to compile as expected. Most articles I've found relate to basic usage of Link or persisting state.

The following works rendering and navigating, but all state is gone on new page:

let series = chart.series.push(new am4charts.LineSeries());

let bullet = series.bullets.push(new am4charts.CircleBullet());

bullet.url = ../Members/{member.name};

I'm thinking there's a React concept I'm missing or an easy way to set a link's URL. I'd like to navigate without resetting all the previously loaded states.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

carlymykalac

Add To Favorites

Follow

Total Points: 740

Total Questions: 91

Total Answers: 91

Location: Sudan

Member since Thu, May 7, 2020

4 Years ago

answered 5 Years ago emiliano · Accepted Answer

Instead of using urls, use a click (hit) event to stay within the React ecosystem. If you allow the chart component to be rendered via React Router and export it with withRouter, you can take advantage of this.props.history on the component itself. As for how to handle the member's name, presuming the bullet is actually the template for other bullets, I personally believe the member's name should be part of the chart's data. E.g.

Main component:

import React, { Component } from react;

import ReactDOM from react-dom;

import { Route, BrowserRouter as Router } from react-router-dom;



// ...



// main component's render

  <Router>

    <React.Fragment>

      <Route

        path=/

        render={props => <App {...props} />}

      />

      <Route

        path=/Member/:name

        render={props => <Person {...props} extra=via router />}

      />

    </React.Fragment>

  </Router>

Component that has your chart (e.g. App):

import React from react;

import { withRouter } from react-router-dom;

import * as am4core from @amcharts/amcharts4/core;

import * as am4charts from @amcharts/amcharts4/charts;

import am4themes_animated from @amcharts/amcharts4/themes/animated;



// App's componentDidMount() ...



// ...chart code...



// Member names found in bullet data

chart.data = [ { name: ..., /* ... */ }, /* ... */ ];



// Since we're not using `url`, manually change the cursor to a pointer on hover

bullet.cursorOverStyle = am4core.MouseCursorStyle.pointer;



// Bullet click event

bullet.events.on(hit, event => {

    this.props.history.push('../Members/' + event.target.dataItem.dataContext.name);

});



// ... end App



export default withRouter(App);

Here's a fork of our Column charts with images at top demo in React that when clicking the bullet/images, both updates the main component's state as well as goes to a new URL, and both load the person's info:

https://codesandbox.io/s/olpzok2rxz

If the member.name is not part of the chart data and cannot be, it would help to have a sample of your app whether on JSFiddle or CodeSandbox so we can help further.