I have a react-native app with top level App.js that is:
import { createStackNavigator } from 'react-navigation';
class App extends Component {
render() {
return <AppStack {..this.props} />
}
}
export withAuth(App)
Where the higher order component withAuth adds user and authenticating props to App:
const withAuth = (Component) =>
class WithAuth extends React.Component {
constructor(props) {
super(props)
this.state = {
authenticating: true,
user: false
}
}
componentDidMount() {
// authenticating logic ...
firebase.auth().onAuthStateChanged(user => {
if (user)
this.setState({
authenticating: false,
user: user
})
else
this.setState({
authenticating: false
})
})
}
render() {
return (<Component user={this.state.user} authenticating={this.state.authenticating} {...this.props} />)
}
}
And the AppStack is:
const AppStack = createStackNavigator(
{ AppContainer, Profile },
{ initialRouteName : 'AppContainer' }
)
Note there is no code passing the props that was passed down from class App down to AppContainer and Profile.
Consequentially the user and authenticating props inside AppContainer is undefined.
class AppContainer extends Component {
// this.props.user is false and this.props.authenticating is true
componentDidMount() {
console.log(`Debug Did mount with user: ${this.props.user}`, this.props.authenticating)
}
render() {
// if I `export withAuth(AppContainer)`, then this prints the user information. but not if I log inside `componentDidMount`
console.log(`Debug loaded with user: ${this.props.user}`, this.props.authenticating)
return <Text>'hello world'</Text>
}
}
export default AppContainer
I could wrap AppContainer inside withAuth and do export default withAuth(AppContainer), but then AppContainer cannot read this.props.user property in componentDidMount, only in render() { ... }.
Ideally I would like to pass down the user and authenticating property from AppStack, how would I do so?
Note: for now I would like to not use redux if possible. This is a simple app.
You can pass props from your high order component to child screen through screenProps. Example:
const withTest = Component => (
class WithTest extends React.Component {
render() {
return (<Component screenProps={{ user: "abc" }} />);
}
});
Check Navigator Props for more detail.
Related
I have an issue in figuring in what conditions props are not passed down by the tree. I have a Fetcher class in which I populate with "layouts", then pass it to children props, but I cannot access it from child component.
EX:
import React, { Component } from 'react'
import axios from "axios";
export default class Fetcher extends Component {
constructor(props) {
super(props)
this.state = {
layouts: [],
}
componentDidMount() {
this.getLayouts();
}
getLayouts = () => {
axios
.get("/layout")
.then((res) => {
this.setState({
layouts: res.data,
});
})
.catch((err) => console.log(err));
};
render() {
return (
this.props.children(this.state.layouts)
)
}
}
This is my Parent component on which I pass some props children:
ex:
import React, { Fragment } from "react";
import Fetcher from "./Fetcher";
class App extends Component {
<Fetcher>
{(layouts) => {
return <Fragment>
<NewLayout
layoutsList={layouts} />
</Fragment>
}}
</Fetcher>
}
import React from "react";
class NewLayout extends React.Component {
constructor(props) {
super(props)
this.state = {
layouts: [],
}}
componentDidMount() {
this.setState(() => ({
layouts: this.props.layoutList
}))
}
render() {
{ console.log(this.state.layouts) }
{ console.log(this.props.layoutList) }
return (
....
The children prop is not a function, if you want to pass a property to it you should use React.Children API with React.cloneElement:
class Fetcher extends Component {
state = {
layouts: [/*some layout values*/],
};
render() {
const children = this.props.children;
const layouts = this.state.layouts;
return React.Children.map(children, (child) =>
React.cloneElement(child, { layouts })
);
}
}
Typo my friend, looks like you pass layoutsList prop to NewLayout, but internally use layoutList.
I have a component that contains a state, and I will pass the state data into another component, I use a static contextType to throw the state data but the data does not reach the intended component, what do you think this is wrong? thank you
this is my parent component
export const MyContext = React.createContext();
export class MerchantByPromo extends Component {
constructor(props) {
super(props);
this.state = {
dataPromo: [],
loading: true
};
}
async componentDidMount() {
const merchant_id = this.props.match.params.id_merchant
await Api.post('language/promo-voucher-by-merchant', { MERCHANT_ID: merchant_id })
.then((response) => {
if (response.data.STATUS_CODE === '200') {
this.setState({
dataPromo: response.data.DATA,
loading: false
});
}
})
}
this is my child component
import React, { Component } from 'react'
import { MyContext } from './MerchantByPromo'
export class MerchantByPromoDetail extends Component {
constructor(props){
super(props)
this.state = {
detailPromo:[],
}
}
UNSAFE_componentWillMount(){
let value = this.context
console.log(value)
}
componentDidMount(){
}
render() {
return (
<MyContext.Consumer>
<p>tes</p>
</MyContext.Consumer>
)
}
}
I always get an error message like this "TypeError: render is not a function", what's the solution?
<MyContext.Consumer>
{() => <p>tes</p>}
</MyContext.Consumer>
change to this and Check
Is there any way to send data from the component's state to HoC?
My component
import React, { Component } from 'react';
import withHandleError from './withHandleError';
class SendScreen extends Component {
contructor() {
super();
this.state = {
error: true
}
}
render() {
return (
<div> Test </div>
)
}
};
export default withHandleError(SendScreen)
My HoC component:
import React, { Component } from 'react';
import { ErrorScreen } from '../../ErrorScreen';
import { View } from 'react-native';
export default Cmp => {
return class extends Component {
render() {
const { ...rest } = this.props;
console.log(this.state.error) //// Cannot read property 'error' of null
if (error) {
return <ErrorScreen />
}
return <Cmp { ...rest } />
}
}
}
Is there any way to do this?
Is the only option is to provide props that must come to the SendScreen component from outside??
A parent isn't aware of child's state. While it can get an instance of a child with a ref and access state, it can't watch on state updates, the necessity to do this indicates design problem.
This is the case for lifting up the state. A parent needs to be notified that there was an error:
export default Cmp => {
return class extends Component {
this.state = {
error: false
}
onError() = () => this.setState({ error: true });
render() {
if (error) {
return <ErrorScreen />
}
return <Cmp onError={this.onError} { ...this.props } />
}
}
}
export default withHandleError(data)(SendScreen)
In data you can send the value you want to pass to HOC, and can access as prop.
I know I answer late, but my answer can help other people
It is very easy to do.
WrappedComponent
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import HocComponent from './HocComponent';
const propTypes = {
passToHOC: PropTypes.func,
};
class WrappedComponent extends Component {
constructor(props) {
super(props);
this.state = {
error: true,
};
}
componentDidMount() {
const {passToHOC} = this.props;
const {error} = this.state;
passToHOC(error); // <--- pass the <<error>> to the HOC component
}
render() {
return <div> Test </div>;
}
}
WrappedComponent.propTypes = propTypes;
export default HocComponent(WrappedComponent);
HOC Component
import React, {Component} from 'react';
export default WrappedComponent => {
return class extends Component {
constructor() {
super();
this.state = {
error: false,
};
}
doAnything = error => {
console.log(error); //<-- <<error === true>> from child component
this.setState({error});
};
render() {
const {error} = this.state;
if (error) {
return <div> ***error*** passed successfully</div>;
}
return <WrappedComponent {...this.props} passToHOC={this.doAnything} />;
}
};
};
React docs: https://reactjs.org/docs/lifting-state-up.html
import React, { Component } from 'react';
import withHandleError from './withHandleError';
class SendScreen extends Component {
contructor() {
super();
this.state = {
error: true
}
}
render() {
return (
<div state={...this.state}> Test </div>
)
}
};
export default withHandleError(SendScreen)
You can pass the state as a prop in your component.
I'm new to redux and having trouble wrapping my head around presentational and container components.
Relevant stack:
react v0.14.8
react-native v0.24.1
redux v3.5.2
react-redux v4.4.5
The issue:
I have a login button component, which when rendered checks the login status and calls the onSuccessfulLogin action which updates the state with the user's Facebook credentials.
However, when trying to separate this into separate presentational/container components, I'm unable to call the onSuccessfulLogin action: Error: onSuccessfulLogin is not defined.
What am I doing wrong here? I'd imagine there's something simple that I'm not understanding with the relationship between the two components and the connect() function.
Presentational Component (Login.js)
import React, { PropTypes } from "react-native";
import FBLogin from "react-native-facebook-login";
import UserActions from "../users/UserActions";
class LoginPage extends React.Component {
render() {
const { userData, onSuccessfulLogin } = this.props;
return (
<FBLogin
permissions={["email","user_friends"]}
onLoginFound= { data => {
onSuccessfulLogin(data.credentials);
}}
/>
)
}
};
export default LoginPage;
Container Component (LoginContainer.js)
import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";
const mapDispatchToProps = (dispatch) => {
return {
onSuccessfulLogin: (userData) => {
dispatch(UserActions.userLoggedIn(userData))
}
}
}
const mapStateToProps = (state) => {
return {
userData: state.userData
}
}
const LoginContainer = connect(
mapStateToProps,
mapDispatchToProps
)(LoginPage);
export default LoginContainer;
Also, if I wanted to make the updated state.userData accessible to the LoginPage component, how would I do that? Any help is appreciated!
Solved! When using ES6 classes, you're required to call super(props) in a constructor method in order to access the container's properties in the connected presentational component:
class LoginPage extends React.Component {
constructor(props){
super(props);
}
render(){
// ...
}
}
Your container component is supposed to be a component and it must have a render function with the dumb/presentational components you want to render.
import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";
class LoginContainer extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<LoginPage userData={this.props.userData}
onSuccessfulLogin={this.props.onSuccessfulLogin}
/>
)
}
};
const mapDispatchToProps = (dispatch) => {
return {
onSuccessfulLogin: (userData) => {
dispatch(UserActions.userLoggedIn(userData))
}
}
}
const mapStateToProps = (state) => {
return {
userData: state.userData
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(LoginPage);
I have a (React) container component. It's children need different data from different api endpoints, so I want to dispatch 2 actions the same time (both are asynchronous).
This doesn't seem to be possible. If I have both dispatches, the activeSensors are always empty...
class Dashboard extends React.Component {
static propTypes = {
userData: React.PropTypes.array.isRequired,
activeSensors: React.PropTypes.object.isRequired
};
static contextTypes = {
store: React.PropTypes.object
};
constructor(props) {
super(props);
}
componentWillMount() {
const { store } = this.context;
store.dispatch(fetchActiveSensorDataForAllSensors());
store.dispatch(fetchUserData());
}
render() {
return (
<div>
<AnalyticsPanel activeSensors={this.props.activeSensors}/>
<SearchCustomer userData={this.props.userData}/>
</div>
);
}
}
export default connect((state)=> {
return {
userData: state.userData.data,
activeSensors: state.activeSensorsAll.sensors
}
})(Dashboard);
EDIT: See the source for the full component.
I haven't used the this.context.store.dispatch method your code uses, but I don't think that its necessarily the way you should be doing things. Primarily because it really muddies the line between container and presentational components. Presentational components don't need access to store, and there are other methods to do this which don't have this (albeit pedantic) drawback.
My component files typically look like this:
import React from 'react';
import { connect } from 'react-redux';
import * as actions from './actions';
export class Container from React.Component {
componentWillMount() {
// Most conical way
const { fetchActiveSensorDataForAllSensors, fetchUserData } = this.props;
fetchActiveSensorDataForAllSensors();
fetchUserData();
// Less conical way
// const { dispatch } = this.props;
// const { fetchActiveSensorDataForAllSensors, fetchUserData } = actions;
// dispatch(fetchActiveSensorDataForAllSensors());
// dispatch(fetchUserData());
}
render() {
return (
<div>
<AnalyticsPanel activeSensors={this.props.activeSensors}/>
<SearchCustomer userData={this.props.userData}/>
</div>
);
}
}
function mapStateToProps(state) {
return {
activeSensors: state.activeSensorsAll.sensors,
userData: state.userData.data
}
}
export default connect(mapStateToProps, actions)(Container);