I have my code as below
class Cell extends React.Component{
render(){
return (
<div className="cell" id={this.props.id}>{this.props.value}</div>
)
}
}
let table=[[1,2,3],[4,5,6],[7,8,9],[3,2,1],[6,5,4],[9,8,7],[1,5,8],[9,6,3],[2,4,7]];
class Row extends React.Component{
render(){
return(
<div className="row" id={this.props.id}>
{
_.map([...Array(9)],(x,i)=>
<Cell id={this.props.id+""+[i+1]} value={table[this.props.id][i]} key={i}/>
)
}
</div>
)
}
}
class Box extends React.Component{
render(){
return(
<div className="box">
{_.map([...Array(9)],(x,i)=>
<Row key={i} id={i+1}/>
)}
</div>
)
}
}
I want to set the attribute value of <Cell/> from array table and I get Uncaught TypeError: Cannot read property '0' of undefined
I tried to look into the lodash.js file but didn't really catch what it does. Can anyone explain to me what's wrong here ?
EDIT: UPDATED CODE
It seems that you're setting the id always by incrementing by one: <Row key={i} id={i+1} /> and you use that id as the index for the table. The issue with this is that at the last iteration you'll receive a table index for a non-existing table element. This is giving you an undefined object.
Related
MyPinchZoomView has a state 'scale'.
In the setup below, how can the component 'board' keep track of the current scale?
render() {
return (
<MyPinchZoomView
minScale={0.9}
maxScale={2}
>
{ this.board }
</MyPinchZoomView>
)
}
The same Question, if I would add the MyPinchZoomView within the board component:
return (
<View>
<MyPinchZoomView
minScale={0.9}
maxScale={2}
>
{ this.fields }
{ this.rackFields }
{ this.figures }
</MyPinchZoomView>
<Toolbar board={this} figures={this.figures}></Toolbar>
<Text>{this.state.lastRefresh}</Text>
<Moves game={this.props.game} lastRefresh={this.state.lastRefresh}/>
<FlashMessage position="top" ref="errorMessage" />
</View>
)
}
You can either pass scale as a function param, i.e. this.board(scale), or instead use the component as a child directly:
<Board
scale={scale}
/>
Rather passing complete states (not recommended)
Pass values as props
such as
<ParentComponent>
<ChildComponent dataOne={this.state.stateOfDataOne}/>
</ParentComponent>
then in your child component
<ChildComponent>
<Text>{this.props.dataOne}</Text>
</ChildComponent>
I am scratching my head hard; trying to figure out what's wrong in below snippet.
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
class MyButton extends React.Component {
setNativeProps = (nativeProps) => {
alert(JSON.stringify(this._root.props)) //able to get this.v here
}
render() {
return (
<View ref={cc => {this._root = cc; this.v = 100 }} me="tom">
<Text ref={component => { this._root1 = component;}} style={{margin:55}} onPress={()=>this.setNativeProps({text:'fgfg'})}>{this.props.label} </Text>
</View>
)
}
}
export default class App extends React.Component {
render() {
return (
<TouchableOpacity >
<MyButton label="Press me!" />
</TouchableOpacity>
)
}
}
basically trying to get the props from <View> element i.e. this._root.props using ref callback
though this._root1.props works perfectly fine all the times.
could someone help me figure out what's the problem with it?
EDIT:
I am even able to see this._root but even not this._root.props.me.
Could you try not to do
alert(JSON.stringify(this._root.props))
instead just do
alert(this._root.props)
i.e. remove JSON.stringify
The reason it's not working is because View is having a child element with-in itself while with using Text it's not having any child in it.
I've tried importing a property from a class and it worked when i created the class withing the same file, however when importing it from an outside js file I get a 'Element type invalid: expecting a string but got an object' error. Thanks for any help.
export class Setting extends Component {
render(){
return(
<Image source={{uri: 'https://someimage.png/>
);
}
}
import {Setting} from '../Settings.js'
export default class MainScreen extends Component {
render() {
return (
<View>
<Setting/>
</View>
);
}
}
Hey pretty sure this is a duplicate question, here's a similar one: React Native error: Element type is invalid: expected a string or a class/function but got: object
But this should fix your problem, hopefully.
export default class Settings extends Component {
render(){
return(
<Image source={{uri: 'https://someimage.png/>
);
}
}
import Settings from '../Settings.js'
export default class MainScreen extends Component {
render() {
return (
<View>
<Setting/>
</View>
);
}
}
As you can see I changed the way your import was working previously and added default to your export for your class and also kept your class name consistent to the JavaScript file.
hey guys I am using multiple selector in my app..the thing I want t show is that I want to generate num from 1 to 69 through loop..but when I tried to generate number by loop it gives me error like undefined is not a function ...
I tried a loop as globally and in my render function but every time I have same error...
export default class Createottery extends Component {
static navigationOptions = {
header: null
}
state = { selectedFruits: [],mynum:[] }
onSelectionsChange = (selectedFruits) => {
//alert(JSON.stringify(selectedFruits))
// selectedFruits is array of { label, value }
this.setState({ selectedFruits:selectedFruits })
alert(JSON.stringify(this.state.selectedFruits))
}
componentDidMount(){
for(let mylottery=0; mylottery<=69;mylottery++)
{
this.setState({mynum:mylottery})
//alert(mylottery)
}
}
render () {
let comeon=0
for(comeon=0;comeon<=5;comeon++){
comeon=comeon }
return (
<Container style={styles.Containerstyle}>
<Header searchBar rounded style={styles.headerstyle}>
<Item style={{backgroundColor:'#000'}}>
<Input placeholder="Lottery" placeholderttextSize={22} placeholderTextColor={'#fff'}/>
<Icon name="search" style={{color:'#fff'}} size={22}/>
</Item>
</Header>
<Content>
<View >
<Text style={{color:'#000',alignItems: 'center',fontSize:22}}>select any 5 number or quick pick</Text>
<SelectMultiple
style={{backgroundColor:'black'}}
items={comeon}
//selectedItems={this.state.selectedFruits}
// onSelectionsChange={this.onSelectionsChange}
/>
</View>
</Content>
</Container>
)
I want when my app starts It gives my all number which I want to generate through loop
1) Because you are sending number to items of SelectMultiple Component. items should be array of object.
<SelectMultiple
style={{backgroundColor:'black'}}
items={comeon} {//this should be array instead of number}
selectedItems={this.state.selectedFruits}
onSelectionsChange={this.onSelectionsChange}
/>
2) You are doing the same mistake while creating array in componentDidMount. You are setting every looped number to mynum
How to get the Id of the element in onPress event handler.
I am adding elements dynamically and wants to know in the event handler of onPress of these elements to store in the state which elements are clicked.
Here is the code i have
export default class App extends Component {
constructor(props){
super(props);
this.getElements= this.getElements.bind(this);
this.selectElement = this.selectElement.bind(this);
}
componentWillMount(){
this.state = {
noOfElements :10
}
}
selectElement(e,key){
console.log('selectElement() : key=',key);
}
getElements(){
let elements =[];
for(let index=0;index<this.state.noOfElements;index++){
elements.push(
<View key={'View_'+index} style={{flex:1}}>
<Button
key={'View_'+index}
id={index}
onPress={(e,index) => {this.selectElement(e,index)}}
title={'Button-'+index}
/>
</View>
);
}
return elements;
}
render(){
let elements = this.getElements();
return(
<View style={styles.container}>
<Text>Test</Text>
{elements}
</View>
);
}
}
I tried just passing the key like
onPress={(index) => {this.selectElement(index)}}
with no success..
Not sure what i am doing wrong.
The way you have it, i think index would come up undefined, just remove index as an argument in your onPress so it grabs index from the for loop. Also you can prob refactor it using map.
onPress={(e) => this.selectElement(e,index)}
Changed the event handler as below and it is working fine now.
onPress={this.selectElement.bind(this,index)}
and the function now just accepts the index
selectElement(key){
console.log('selectElement() : Index=',key);
}