importing a class into react

Question

I am trying to import a class into the return() on a react project. I tried using reactDOM but I kept getting an error saying "View config not found for name ht". The class I am trying to import is called "ht". I put the tag in between my header tag. This is the App.js:

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, ImageBackground, ScrollView } from 'react-native';
import ListItem from "/Users/Westin/assignment5/components/ListItem";
import ht from "/Users/Westin/assignment5/components/ht";




export default class App extends React.Component {
  state ={
    thing: "",
    things: [],
  };

  thingValueChanged = value =>{
    //alert(value);
    this.setState({
      thing: value
    });
  }

  onClickingAdd = () =>
  {
    if(this.state.thing === "")
    {
      return;
    }

    this.setState(prevState => {
        return {
          things: prevState.things.concat(prevState.thing)
        };

    });
  }



  render() {
    const thingsOut = this.state.things.map((thing,i) => (<ListItem key = {i} thing={thing} />));
    
    
    return (
      <View style={styles.background}>
      <ImageBackground source={require("/Users/Westin/assignment5/background.jpg")} style={{width: '100%', height: '100%'}}>
      <View style={styles.container}>
      <View style={styles.header}>
      ReactDOM.render(<ht />, document.getElementById('ht'));
      </View>
      </View>



      <View style={styles.input}>
      <TextInput 
      value={this.state.thing}
      placeholder="Add your favourite things" 
      style={styles.inputbox}
      onChangeText={this.thingValueChanged}
      />
      
      <Button
      title="Add"
      onPress = {this.onClickingAdd}
      />
        </View>
        
         
      
    
      <ScrollView>
        {thingsOut}
        </ScrollView>
      </ImageBackground>
      </View>
    );
}
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'black',
    opacity: 0.7,
    alignItems: 'center',
    justifyContent: 'flexstart',
    paddingTop: 30,
    color: 'white'
  },
  background: {
    flex:1,
    alignItems: 'center',
    
  },
  header: {
    padding: 10,
    
  },
  headerText: {
    fontSize: 35,
    color: 'white',
  },
  input: {
    flexDirection: "row",
    width: '100%',
    justifyContent: "space-evenly",
    alignItems: "center",
    backgroundColor: "black",
    opacity: '0.7',
  },
  inputbox: {
    borderWidth: 2,
    height: 40,
    width: "70%",
    backgroundColor: 'white',
    padding: 10,
  },
  addButton: {
    addButton: {
      width: "30%",

  }}});

This is the class that I am trying to import.

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

class ht extends React.Component{
render() {
    return (
        <View>
            <Text style={styles.headerText}>My Favorite Things</Text>
            </View>
  );
}
}


const styles = StyleSheet.create({
    headerText: {
        fontSize: 35,
        color: 'white',
  }});


  export default ht;

Why are you trying to render your class component with ReactDOM like this? It does not work as it is. — devserkan
– devserkan, Commented Jul 26, 2018 at 21:10
Instead just use <ht /> note you may have to change the class name to begin with an uppercase letter. — SGhaleb
– SGhaleb, Commented Jul 26, 2018 at 21:15

devserkan · Accepted Answer · 2018-07-26 21:13:33Z

2

React components must start with a capital letter, so import your class like this:

import Ht from "/Users/Westin/assignment5/components/ht";

I also recommend changing its name in the original one with the capital letter for the sake of consistency.

Then, render your component as a regular one:

....
<View style={styles.header}>
<Ht />
</View>
....

answered Jul 26, 2018 at 21:13

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

importing a class into react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related