score:0

i think you are getting confused here with const keyword. as the arrays in javascript are references, you are mutating the state.

when you declare const initialstateoflist with array, you will be freely able to add variables to this variable. "const" here means once declared you cannot re-assign that variable. but inside array, the elements can be changed.

e.g.

const arr1 = [1,2,3];
arr1.push(4); // possible. no error
arr1 = [1,2,3,4]; // not possible.

so, every time you have to create new array and don't mutate the original array refernece.

score:0

the reason is you are mutating list in state which is not allowed in react,

import react , {component} from 'react';
import {render} from 'react-dom';

const initialstateoflist = [1,2,3,4,5];

class form extends component{

    state = {
        tempo : '',
        list : initialstateoflist
    };

    cleararray=()=>{
        this.setstate({list:[]});
    }

    resetarray=()=>{
        this.setstate({list:initialstateoflist});
    }

    tempadd=(event)=>{
        this.setstate({tempo:event.target.value});
    }

    //read comment 
    additem=(event)=>{
        event.preventdefault();
        // here you are mutating list in state, never do this in react instead you can use spread operator to create new array
        //this.state.list.push(this.state.tempo);
        const newlist = [...this.state.list, this.state.tempo]
        this.setstate({tempo:'', list: newlist});
    }

    render(){
        const listitem = this.state.list.map((number) =>  <li>{number}</li>);

        return(
            <div>
                <form ref="form" id="getinput" onsubmit={this.additem}>
                    {this.state.list.map((listitem)=><li>{listitem}</li>)}
                    <input type="text" ref="formtext" id="adder" onblur={this.tempadd} />
                    <input type="submit" ref="formsubmit" id="passer" />
                    <button id="clear" onclick={this.cleararray}>clear</button>
                    <button id="reset" onclick={this.resetarray}>reset</button>

                </form>
            </div>
        );
    };
}

score:0

you mutated directly initialstateoflist with push at

this.state.list.push(this.state.tempo)

that cause the issue. you need to clone the array before mutating.

have a lot of ways to clone an object (array is a type of object) to avoid mutate directly.

const { list, tempo } = this.state // should use object destructuring for clean code

const newlist  = object.assign({}, list)  // object.assign
const newlist1 = [...list]                // spread syntax
const newlist2 = _.clone(list)            // `lodash` library

newlist.push(tempo)
this.setstate({list: newlist, tempo: ''})

score:1

you can try to reset to the original state using a custom reset function:

import react, { component } from 'react';

const getdefaultstate = () => ({
  myarray: [1,2,3],
});

class mycomponent extends component {
  constructor(props) {
    super(props);
    this.state = { ...getdefaultstate() };
  }

  componentdidmount() {
    this.setstate({ myarray: [4,5,6] })
  }

  resetstate = () => {
    this.setstate({ ...getdefaultstate() });
  };

  render() {
    return (
      <div onclick={this.resetstate}>
        {json.stringify(this.state.myarray)}
      </div>
    );
  }
}

Related Query

More Query from same tag