Adding an item to list in React native

Question

So I'm trying to make a simple add component in React native, and am currently struggling with various errors. I'm a beginner in React, and a lot of this seems like magic to me. Basically, i have a form which should take a value and add it to an array/list. Right now I'm doing this with the help of some tutorial but I'm getting errors. I tried this with setting const [test, setTest] = useState([1, 2, 3]), but this too had some errors. This is my code below, so please if you could help me. The current error is: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. And displaying the array also is a problem for me in the render() part, so if you could please give me a heads up there too. Thanks!

import React, { useState } from 'react';
import { ListItem, Button } from 'react-native-elements'



export default class AddNote extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = {
        niz: ['test1', 'test2']
      }
    }


    handleChange(event) {    this.setState({value: event.target.value});  }
    handleSubmit(event) {
      event.preventDefault();
      const {niz} = this.state;
      const newItem = 'test3';

      this.setState({
        niz:[...this.state.niz, newItem]
      })
      console.log(niz);
    }

    render() {
      return (
          <div>
            {/* {
           niz.map(note => <ListItem
              title={note.title}
              bottomDivider
              chevron
            />)
        } */}
        <form onSubmit={this.handleSubmit}> 
            <header> Add Note </header>
            <input type="text" value={this.state.value} onChange={this.handleChange} />       
          <input type="submit" value="Add" /> 
        </form>
        </div>
      );
    }
  }

Community · Accepted Answer · 2020-06-20 09:12:55Z

React native doesn't have div and form tags replace with view and text input that are imported from react-native.

I had edited your code made necessary changes check it once:

import React, { useState } from 'react';
import { ListItem } from 'react-native-elements';
import {View,Button, TextInput} from 'react-native'; 

export default class AddNote extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
          text:"",
        niz: ['test1', 'test2']
      }
    }


    handleSubmit =()=> {
        if(this.state.text !=""){
            this.state.niz.push(this.state.text);
            this.setState({
                niz:this.state.niz
            })
        }
       
      console.log(this.state.niz);
      this.setState({
          text:""
      })
    }

    render() {
      return (
          <View style={{marginTop:"30%"}}>
           {
    this.state.niz.map((l, i) =>{
        return(
            <View>
                <ListItem title={l}
                 bottomDivider
                 chevron
                 />
                </View>
          )
    })
  }
  <View style={{justifyContent:"center",alignItems:"center",marginTop:"5%"}}>
  <TextInput style={{ width:"50%",height: 30, borderColor: "gray", borderWidth: 2,borderRadius:20,paddingLeft:20,paddingRight:20,marginBottom:10 }}
  placeholder="Enter text to be added" placeholderTextColor="gray" onChangeText={(text) => this.setState({ text })} value={this.state.text}/>
   <Button title ="Submit" onPress={this.handleSubmit}></Button>
  </View>
           
        </View>
      );
    }
  }

After entering "test3" as input and submitting the input

Hope this helps!

Collectives™ on Stack Overflow

Adding an item to list in React native

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