Can't load components with props

Question

Im making a component and calling it in my app.js with props inside like { placeholder }, but it always returns a refrenceError: Can't find variable placeholder. I don't understand why.

Calling it:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from 'firebase';
import { Input } from './components/input'
import { Button } from './components/button'

export default class App extends React.Component {
  state = {
    email: '',
    password: '',

  }



  render() {
    return (
      <View style={styles.container}>
      <Input
        placeholder='Enter your email'
        label='Email'
        onChangeText={password => this.setState({ password })}
        value={this.state.password}
      />
        <Input
          placeholder='Enter your password'
          label='Password'
          secureTextEntry
          onChangeText={email => this.setState({ email })}
          value={this.state.email}
        />
        <Button>Login</Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
});

And the component

import React from 'react';
import { View, StyleSheet, Text, TextInput } from 'react-native';

const Input = () => {
  return (
    <View>
      <Text style={styles.label}>Label</Text>
      <TextInput
        style={styles.input}
        placeholder={ placeholder }
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 10,
    width: '100%',
    borderColor: '#eee',
    borderBottomWidth: 2,
  },
  label: {
    padding: 5,
    paddingBottom: 0,
    color: '#eee',
    fontSize: 17,
    fontWeight: '700',
    width: '100%'
  },
  input: {
    paddingRight: 5,
    paddingLeft: 5,
    paddingBottom: 2,
    backgroundColor: '#eee',
    fontSize: 18,
    fontWeight: '700',
    width: '100%',
  }
})

export { Input };

Possible duplicate of [Passing/Accessing props in stateless child component](https://stackoverflow.com/questions/41813165/passing-accessing-props-in-stateless-child-component) — Bhojendra Rauniyar, Jul 27 '18 at 05:13

score 1 · Accepted Answer · answered Jul 27 '18 at 05:11

const Input = ({ placeholder }) => { //<==== here
  return (
    <View>
      <Text style={styles.label}>Label</Text>
      <TextInput
        style={styles.input}
        placeholder={ placeholder }
        />
    </View>
  );
}

props will not be passing in automatically. It will be passed in as an argument, and your input component doesnt accept any argument and you're trying to access a variable placeholder and hence getting the error stated

score 0 · Answer 2 · answered Jul 27 '18 at 05:10

Your Input is taking no props at all. You need to pass the props as parameters of the component function:

const Input = (props) => {
  return (
    <View>
      <Text style={styles.label}>Label</Text>
      <TextInput
        style={styles.input}
        placeholder={ props.placeholder }
        />
    </View>
  );
}

score 0 · Answer 3 · answered Jul 27 '18 at 05:10

Accept props as a parameter in the Input component, then use props to access placeholder. You need to change the code of Input component to

const Input = (props) => {
return (
  <View>
    <Text style={styles.label}>Label</Text>
    <TextInput
      style={styles.input}
      placeholder={ props.placeholder }
    />
  </View>
);

}

Hope this will help!

Can't load components with props

3 Answers3