Create new React Component (chartpage) on click

I’m really new to react.js and still practising

I wanted to render a ReChart component as a new page when the user selects a row in a table (Just to visualise the Data).

I tried something like this:

(had to insert here a semicolon cause the tag was not shown)

`handleRowSelection(selectedRows) {
  console.log('selectedRows: ' + selectedRows );
  var myChart = React.createClass({
  render(){
  return(
  <;MyChart value={selectedRows}>
  )
  }
  }) 
  }`

`export default class MyChart extends React.Component {
 constructor(props){``
  super(props);
  }
  render(){
  //must be generic
  return(
  <LineChart
  data={this.props.value}
  margin={{ top: 40, right: 40, bottom: 20, left: 20 }}>
  <CartesianGrid vertical={false} />
  <XAxis dataKey="id" label="myDataChart" />
  <YAxis domain={['auto', 'auto']} label="attribute" />
  <Tooltip />
  <Line dataKey="attribute" stroke="#3f51b5" dot={false} />
  </LineChart>
  )
};`

Unfortunately it didnt help. Any Guesses here?

Thank you in advance!


Source: stackoverflow-javascript

Can’t find variable: navigate

I am trying to navigate between two screen with the help of react-navigation. I am able to access navigate inside the render method as its scope is also inside that method.

Where should I declare so I can access it any method of this component. I am trying to access navigate inside the onPressButton method but it giving an error.

Can’t find variable: navigate

import React, { Component } from "react";
import { View, Text, Image, Button, Alert, StyleSheet } from "react-native";
import styles from "./Styles";
import * as strings from "./Strings";
import RoundButton from "./RoundButton";
var DialogAndroid = require("react-native-dialogs");
import { StackNavigator } from "react-navigation";

export default class CreateMessageScreen extends Component {
  render() {  
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        <Image source={require("./img/create_message.png")} />
        <Text style={styles.textStyle}>{strings.create_message}</Text>

        <RoundButton
          textStyle={styles.roundTextStyle}
          buttonStyle={styles.roundButtonStyle}
          onPress={this.onPressButton}
        >
          CREATE MESSAGE
        </RoundButton>

      </View>
    );
  }

  onPressButton() {
    var options = {
      title: strings.app_name,
      content: strings.create_message,
      positiveText: strings.OK,
      onPositive: () => navigate("DashboardScreen")
    };
    var dialog = new DialogAndroid();
    dialog.set(options);
    dialog.show();
  }
}


Source: stackoverflow-javascript

Integrating Attachment option in messaging system

We’re using a theme by Enginetheme but it don’t allow Buyers and sellers share files. Also need to refresh page each time to receive new messages/notifications.

Looking for a developer to help us add attachment option in messaging & Linking it with AWS S3 bucket. As well as making making notifications/messaging realtime.


Source: stackoverflow-php

How do urls like http://localhost:3000/ work?

I am learning React and I’m running it using create-react-app, which allows me to edit text in a file named App.js and as I save any changes in that file, the webpage with the address http://localhost:3000/ in browser automatically updates without reloading. Normally, while making html/plain js files, i need to reload the page. So how does it dynamically update itself?


Source: stackoverflow-javascript

Navigating to optional parameters with React Router

I am trying to make optional sub routes with my React Router but no matter what I search I can’t seem to find a solution that works for me !

I tried every solution mentioned in this answer:
React Router with optional path parameter
– nothing worked.

So I have the following in one file:

render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes} />
  </Provider> , document.getElementById('app')
  );

and then:

 export default (
   <Router history={browserHistory}>
     <Route path={'/'} component ={ApplicationHomePageContainer}></Route>
     <Route path={'/home'} component ={UserHomePageContainer}></Route>
     <Route path={'/circle(/:path)'} component ={CirclePageContainer}></Route>
    </Router>
 )

I have tried many many different approaches, but whatever I seem to do, the route /circle/whatever never renders anything.
All other work perfectly fine.

I am using React router version 2.8.3, I tried to upgrade to version 3 but that did not solve the issue.


Source: stackoverflow-javascript

Cannot read property ‘location’ of undefined at new Router

So I have a pretty basic setup for my index.js file, where all my routes are held. I’m getting the above TypeError from the console, but I’m unsure as to why. Below is my code:

const React = require('react');
const ReactDOM = require('react-dom');

// React router goodies
import { Router, Route, browserHistory, IndexRoute, hashHistory } from 'react-router';

const App = require('./components/App.jsx');

ReactDOM.render(
  <Router history = {browserHistory}> 
    <Route path="/" component={App}>
    </Route>
  </Router>,
  document.getElementById('app')
);


Source: stackoverflow-javascript

setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op

I’m getting this error when I navigate to other pages, reading through some of the other answers I have added this.onChange = this.onChange.bind(this); to the constructor but I still get the error.

Do I need to add a componentWillMount/componentWillUnmount lifecycle method to the onChange() ?

import React from 'react';
import Header from './header';
import Form from './form';
export default class Home extends React.Component {

constructor() {
  super();

this.onChange = this.onChange.bind(this);
this.state = {
  text: "kkdnsdkond",
 }

}

onChange() {
 this.setState( {
  text: "this is a new title"
})
}


render() {

if(!this.state.text) {
  
Loading...
} const title = "Welcome Tom"; console.log(this.props); return (

Home

{this.props.route.title}
<Header name={"name passed to header component"} title={title} /> <Form /> </div> ); } } Source: stackoverflow-javascript

React Native – populating ListView with async data

I’m getting a list of items as a prop through the redux store. This prop is asyncronous.

My ListView works with syncronous hardcoded data. So the problem is populating with the prop when I actually receive it.

I’m making a ListView out of this item prop data. What’s the best practice on life cycle choices to setState with this prop? I’ve tried componentDidMount – but that’s too early and only called once. I tried componentWillReceiveprops – but that’s also too early since other props get there first. I also tried componentWillUpdate and no luck. I’m tempted to put it in the render function because I know I can grab that prop when I get it but that makes the render function no longer pure.

Thanks for any help!

this.setState({
  dataSource: this.state.dataSource.cloneWithRows(this.props.items);
})


Source: stackoverflow-javascript