I have two react components that have to stay in separate files but need to share a property. One component will change the this.props.color and the other component needs to know what that new color is. I know you can import the actual component but I don't know how to access the properties from that component. Here's a very simple example of my app (I'm using ES6)
component1.js
import React, {Component, PropTypes} from 'react';
export default class FirstComponent extends Component {
static propTypes = {
color: PropTypes.string
}
handleClick () {
//change color here
}
render () {
var styles = {
backgroundColor: this.props.color
};
return <div id="one" style={styles} onclick={this.handleClick}></div>;
}
}
component2.js
import React, {Component} from 'react';
import FirstComponent from './component1.js';
export default class SecondComponent extends Component {
/*...*/
render () {
console.log(FirstComponent); //??
return <div id="two"></div>;
}
}
parent1.js
import React, {Component} from 'react';
import FirstComponent from './component1.js';
export default class FirstComponentParent extends Component {
color = 'rgb(255, 0, 0)';
return React.createElement(FirstComponent, {color: this.color});
}
parent2.js
import React, {Component} from 'react';
import SecondComponent from './component2.js';
export default class SecondComponentParent extends Component {
return React.createElement(SecondComponent);
}
You use a common parent component and pass the color as a prop to the second component and pass a method updating the color as a prop to the first component.
import React, {Component, PropTypes} from 'react';
export default class FirstComponent extends Component {
constructor() {
super();
this.state = {color: 'black'};
}
handleClick () {
//change color here
this.props.changeColor(newColor);
}
render () {
var styles = {
backgroundColor: this.state.color
};
return <div id="one" style={styles} onclick={this.handleClick}></div>;
}
}
import React, {Component, PropTypes} from 'react';
export default class SecondComponent extends Component {
render () {
var styles = {
backgroundColor: this.props.color
};
return <div id="one" style={styles}></div>;
}
}
import React, {Component, PropTypes} from 'react';
import FirstComponent from './first';
import SecondComponent from './second';
export default class ParentComponent extends Component {
constructor() {
super();
this.state = {firstColor: 'black'};
}
changeColor = (newColor) => {
this.setState({firstColor: newColor});
}
render () {
return (
<div>
<FirstComponent changeColor={this.changeColor}/>
<SecondComponent color={this.state.firstColor}/>
</div>;
)
}
}
Related
Parent Component
import React, {Component} from 'react';
import NameContainer from '../nameContainer/index'
export default class Vishal extends Component {
constructor(props) {
super(props);
this.state = {
data: "This is the data"
}
}
render() {
return(
<div>
<p>My name is Vishal</p>
</div>
)
}
}
Child Component
import React, {Component} from 'react';
export default class NameContainer extends Component {
}
How can I use a callback function and import from the child component? Any help will be highly appreciated
This violates the top-down philosophy of react and any sort of way to hijack that is probably not the direction you want to go.
What I think you mean to do is have state in the parent container, and allow the child to display and update that state.
i.e Parent.JS
import React, {Component} from 'react';
export default class NameContainer extends Component {
this.state = { name: 'Vishal' }
handleChange = this.setState({name: event.target.value})
render() {
return (
<Vishal name={this.state.name} handleChange={this.handleChange} /> )}
then in child js // Vishal.js
{ ...boilerplate }
handleChange = this.props.handleChange; // and e.g a button or textfield to allow the user to update the name.
render() {
return ( {this.props.name}) }}
this will display the stateful data of name (initalized as 'Vishal') from Parent.js in the child component, Vishal.js
I am learning ReactNative, and now I'm looking into how to organize the files (for now I am going to create a folder for each page, each with an index, functions and styles file). For some reason, though, I am not being able to import information to index.js, can't use the styles or functions, when I open the page, it doesn't return the func method.
I am wondering whether I am using import wrong. Using import { MenuFunctions} from './Menu' has resulted in an error saying nothing was imported, this error no longer appears, but nothing is being returned still.
This is my code, index, Menu and styles are all in the same folder.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
render(){
return(
<View>
<Text> Text: {MenuFunctions.func} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component{
constructor(props){
super(props);
}
func = () => {return "Hello, World!"};
}
styles.js
import React from 'react';
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component{
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
Menu.js and styles.js shouldn't be React.Component and you forgot to call to Func method, () is missing.
React.Component is a UI component only which include a render method that returns JSX element.
Your code should look like that:
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles';
import {Text, View} from 'react-native';
export default class MenuPage extends React.Component {
render() {
return (
<View>
<Text> Text: {MenuFunctions.func()} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
class MenuFunctions {
func = () => {
return 'Hello, World!';
};
}
export default new MenuFunctions();
styles.js
import {StyleSheet} from 'react-native';
export default styles = StyleSheet.create({
text: {
color: Colors.red30,
}
});
The problem is that you are trying to import Menu.js using import MenuFunctions from './Menu' when you had to specify the file itself:'./Menu/Menu.js'. (remember to call the function using parentheses class.function())
Also, whenever you export as default you don't have to use curly braces {}
If you are wondering about your project structure, you can use the following as a common structure to create projects. Let's say you have the following
- index.js
- src
- assets
- screens
- MenuScreen
- components
- services
- menu
- index.js //this is Menu.js
- android
- ios
NOTE
Do not extend React.Component if you are not exporting a component.
You need an object to perform the function of the class you created.
Then declare and use the constructor.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
constructor(props){
super(props);
this.menu = new MenuFunctions()
MemuStyle = new MenuStyles()
}
render(){
return(
<View>
<Text style={MemuStyle.styles.text}> Text: {this.menu.func()}</Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component {
func(){
return 'Hello, World!';
}
}
styles.js
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component {
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
NOTE: The features you intend to use do not necessarily have to inherit React.
This is my class:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from 'react-intl';
class MyClass extends Component {
constructor(props) {
super(props);
}
get pageTitle() {
const { intl } = this.props;
return intl.formatMessage({id: 'messages_my_class_page_title'});
}
render() {
return (
<div>
Dummy content
</div>
);
}
}
MyClass.propTypes = {
intl: intlShape.isRequired
}
export default injectIntl(MyClass);
My page title appears when I put in a random text and don't use react-intl injectIntl function.
I have 'react-intl' working fine for all other cases. Even for static properties using 'hoist-non-react-statics' library.
I am stumbled upon this one.
Edit 1:
I can fix it using
<FormattedMessage id="messages_my_class_page_title"/>
But I want to know how to use injectIntl way.
I need advice on how to pass a Reactjs prop from a component to my app when it's loaded. I'm able to pass the value when my props are in app.js but how do I handle the prop when loading from a separate component?
Here's what's working so far in app.js:
import React, { PropTypes, Component } from 'react';
import { Grid, Nav, Navbar, NavItem, Jumbotron } from 'react-bootstrap';
import { Link } from 'react-router';
import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap';
function HeaderTitle(props) {
return <h1>{props.name}</h1>;
}
const headerTitle = <HeaderTitle name="About Page" />;
class App extends React.Component {
constructor(props) {
super(props);
}
render() { ...
<p>{headerTitle.props.name}</p>
Parent to Child
If you want to pass all the props through:
render() {
return (
<div>
<HeaderTitle {...this.props} />
</div>
);
}
Or if just some:
render() {
return (
<div>
<HeaderTitle name={this.props.name} />
</div>
);
}
Child to Parent
If you mean the other way round, you need to use a callback
// app
render() {
return (
<div>
<HeaderTitle onGetName={(name) => this.setState({childName: name})} />
<p>{this.state.childName}</p>
</div>
);
}
// headertitle
componentDidMount() {
// maybe some async call or something
axios
.get('/api/say-my-name')
.then(response => this.props.onGetName(response.data);
}
So I guess you need some thing like importing components from one file to another. So you have options to import and export components from another file since React components are basically Objects. In index.js if you have something like
const headerTitle = <HeaderTitle name="About Page" />;
export default headerTitle;
and in app.js
import React, { PropTypes, Component } from 'react';
import { Grid, Nav, Navbar, NavItem, Jumbotron } from 'react-bootstrap';
import { Link } from 'react-router';
import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap';
import HeaderTitle from '/// put the file relative location to app.js"
function HeaderTitle(props) {
return <h1>{props.name}</h1>;
}
class App extends React.Component {
constructor(props) {
super(props);
}
render() { ...
<p>{headerTitle.props.name}</p>
}
So I am following a course on React Native that seems to be a little out of date.
Just trying to import a single component.
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import TaskList from './TaskList';
class AwesomeProject extends Component {
constructor(props, context) {
super(props, context);
this.state = {
todos:[
{
task:'Learn React Native'
},
],
};
}
render() {
return (
<TaskList />
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
TaskList.js
import React, { Component } from 'react';
const {
Text,
} = React;
class TaskList extends Component {
render() {
return (
<Text>Hi this is the TaskList!</Text>
);
}
}
export default TaskList;
I have looked around and I am not doing wrong what others where
Text should be imported from react-native. In TaskList try to do
import {
Text,
} from 'react-native'
instead of
const {
Text,
} = React;