I made a small app in react-native and it won't recognize this.props. Here is the code in let child = this.props.children;
I have searched a lot of tutorials but didn't find a solution
import React,{Component} as react from 'react';
import {
StyleSheet,
View,
TouchableHighlight,
Dimensions,
Animated,
Image,
} from 'react-native';
class TabItem extends Component{
constructor(props) {
super(props);
}
render() {
let child = this.props.children;
return (
// Code omitted
);
}
}
Search where are you rendering the component TabItem and then pass props from there as : <TabItem {...this.props}
I am not sure what you mean by "it won't recognize this.props". I am assuming you get undefined for this.props.children. if that's the case, make sure your TableItem component has children and props are passed correctly.
import React, { Component } from 'react';
class TabItem extends Component{
render(){
return <div> {this.props.children} </div>
}
}
const table = ()=><TabItem>Children</TabItem>
ReactDOM.render(<table />, document.getElementById('root'));
Related
I'm kinda new to react and thought that in the constructor function, using super(props) can fully receive the props that passed by parents. But however, I can't get the string test from my parent component.
So in the parent component, I pass the string "test" as props
import React from 'react';
import Post from '../components/post';
import "../components/css/post.css"
class Bulletin extends React.Component {
render()
{
console.log(this.props);
return (
<div>
<Post test={"sent from parent"}/>
</div>
);
}
}
export default Bulletin;
And then in Post.js, I print the props in two places:
import React, { Component } from 'react';
export default class Edit extends Component {
constructor(props) {
super(props);
console.log(props);
}
render() {
console.log(this.props);
return (
<div className="editor" onClick={this.focus}>
</div>
);
}
}
The two outputs are both {className: "editor"} which is not what I need. I need the string {test: "sent from parent"} and don't know why this doesn't works for me.
I have 2 component parent(LoginScreen) and a child(SignupSection). Child component have onClick button. When user click button I need to fire childcall() function from the parent component and this is not working for me. I get this Error
_this.props.childcall is not a function.
(In '_this2.props.childcall()' is undefined)
I have the following code:
Parent
import React, {Component} from 'react';
import Wallpaper from './Wallpaper';
import SignupSection from './SignupSection';
export default class LoginScreen extends Component {
constructor(props) {
super(props)
}
childcall()
{
alert("hello , this call from child component");
}
render() {
return (
<Wallpaper>
<SignupSection
childcall ={this.childcall.bind(this)}
/>
</Wallpaper>
);
}
}
Child
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View, Text} from 'react-native';
export default class SignupSection extends Component {
constructor(props) {
super(props)
}
componentWillMount()
{
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text} onPress={()=>this.props.childcall()}>Create Account</Text>
<Text style={styles.text}>Forgot Password?</Text>
</View>
);
}
}
It doesn't work because you are rendering the function instead of passing it as a prop.
You are passing inside children prop
<SignupSection>
childcall={this.childcall}
</SignupSection>
change it to
<SignupSection childcall={this.childcall} />
Issue
I have a problem with conditional rendering of a component. As far as I can see, there are 2 approaches to doing this. First approach is ugly as it becomes difficult when I have to do multiple && conditions. The second way is clear, but it adds the component itself to the state and further computations with the state value is difficult. E.g checking what is the message value for error.
I have given both the approaches below. Please let me know which would be better. Is there a another approach than both of them?
Application
This is a simple application that renders either 'Main' component or 'Err' component, based on the state of 'err' attribute in first approach and content of the comp attribute in second approach.
Initially Main component is rendered. The err attribute is updated to some value after 2 seconds, which triggers rerendering. At this time, I want Err component to render.
The real application is I have an external api call on componentDidMount and it can either fail or succeed. I have to display different components based on result. It is a little more complicated with multiple state values being updated. I have simplified the issue below for the purpose of demonstration.
Common steps for both types
npx create-react-app react-oop
component/Err.js
import React,{Component} from 'react'
class Err extends Component {
render(){
return(
<div>
Error Component
</div>
)
}
}
export default Err
component/Main.js
import React, {Component} from 'react'
class Main extends Component {
render(){
return(
<div>
Main Component
</div>
)
}
}
export default Main
First approach
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err'
import Main from './components/Main'
class App extends Component {
constructor(props){
super(props)
this.state = {
err: null
}
this.setError = this.setError.bind(this)
}
setError(){
return(
this.setState(() => {
return({
err: 'Error'
})
})
)
}
componentDidMount(){
setTimeout(this.setError, 2000)
}
render() {
return (
<div className="App">
{
this.state.err ? <Err /> : <Main />
}
</div>
);
}
}
export default App;
Second approach
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err'
import Main from './components/Main'
class App extends Component {
constructor(props){
super(props)
this.state = {
comp: <Main />
}
this.setError = this.setError.bind(this)
}
setError(){
return(
this.setState(() => {
return({
comp: <Err />
})
})
)
}
componentDidMount(){
setTimeout(this.setError, 2000)
}
render() {
return (
<div className="App">
{this.state.comp}
</div>
);
}
}
export default App;
I definitely recommend the 1st approach. Store data (json), not views (jsx) in your component's state.
Actually there is a 3rd approach that takes the best of both:
use a jsx variable to edit the view (with your logic) before rendering
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err';
import Main from './components/Main';
class App extends Component {
constructor(props){
super(props);
this.state = {
err: null
};
}
// This way of writing functions saves you the binding
setError = () => this.setState({err: 'Error'})
componentDidMount(){
setTimeout(this.setError, 2000);
}
render() {
let comp = <Main />;
// Put your logic here so your returned JSX is clear
if (this.state.err)
comp = <Err />;
return (
<div className="App">
{comp}
</div>
);
}
}
export default App;
Both approaches are essentially the same but I prefer option 1 as it's simpler to grasp. You can also use something like babel-plugin-jsx-control-statements#choose which makes the React component look simpler:
<Choose>
<When condition={ test1 }>
<Main />
</When>
<When condition={ test2 }>
<AnotherMain />
</When>
<Otherwise>
<Err />
</Otherwise>
</Choose>
I know that the following snippet gets optimized if styles are created by Stylesheet.create() and Child extends PureComponent.
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
export default class Parent extends Component {
render() {
return (
<View>
<Child style={styles.x} />
</View>
)
}
}
Does it also works with multiple styles? I'm afraid that [] literals prevent optimization.
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
export default class Parent extends Component {
render() {
return (
<View>
<Child style={[styles.x, styles.y]} />
</View>
)
}
}
Or do I need to define combined style statically?
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
const childStyles = [styles.x, styles.y]
export default class Parent extends Component {
render() {
return (
<View>
<Child style={childStyles} />
</View>
)
}
}
I confirmed that array literal spoils PureComponent optimization.
I have a parent component and a child component, I want to pass
property from Parent to Child by using {...this.props}, I dont want
any action or reducer in the picture,Is it possible to do this?
My Child Component is like this:-
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class SampleChild extends Component {
constructor(props) {
super(props)
}
render(){
return(
<div>This is Parent</div>
)
}
}
SampleChild.propTypes={
Header:React.PropTypes.string.isRequired
}
export default SampleChild
My Parent Component is like this:-
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class SampleParent extends Component {
constructor(props) {
super(props)
}
render(){
return(
<div><SampleChild {...this.props}/></div>
)
}
}
export default SampleParent
Now how can I pass the Header Property from the SampleParent Component to SampleChild?.Please assist me.
<SampleParent Header="Hello from Parent" />
Will do the trick for you since you're spreading all props coming from SampleParent to SampleChild you need to make sure that the SampleParent just receives it as a prop if it's dynamic.
If it's a static prop you can define it in defaultProps for the SampleParent and you'll always pass the same string.
SampleParent.defaultProps = {
Header: 'Hello from Parent'
}
If you are just trying to pass "all" props from parent to child, you can do it this way.
From the component that is rendering the SampleParent ...
<SampleParent />
The SampleParent component:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import SampleChild from './SampleChild';
class SampleParent extends Component {
render() {
return(
<div>
<SampleChild {...this.props} />
</div>
)
}
}
SampleParent.defaultProps = {
Header: "Header from parent"
}
export default SampleParent;
The SampleChild component:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class SampleChild extends Component {
render() {
return(
<div>
<div>This is the Header passed from parent:</div>
{this.props.Header}
</div>
)
}
}
SampleChild.propTypes = {
Header: React.PropTypes.string.isRequired
}
export default SampleChild;