How to create an object from another class, and push it into the state array?

Question

I'm currently working on a React application, where I two classes - let's call them class App and class Container. Basically, class App has a state array, and I want to have many Container objects in this array.

class Container extends React.Component{
    render(){
       return(
          <img src= {this.props.url} />
       );
    }
}



class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            url: ""
            data: []
        }
    }


    handleSubmit(event){
        event.preventDefault();

        //I WANT TO BE ABLE TO MAKE A NEW CONTAINER, AND PASS THE URL AS PROPS.
        // THEN, I WANT TO ADD THAT CONTAINER TO THE ARRAY.     

        this.setState({
            data: url = this.state.url, id = 'a'
        });
    }


    render(){
        return (
           <form onSubmit={this.handleSubmit}>
                <label htmlFor="url">url:</label>
                    <input
                        type = "text"
                        name = "url"
                        value = {this.state.url}
                        onChange = {this.handleChange}
                    />
           </form>

        )
    }
}

In the function handleSubmit() above, I want to add a new container containing the props URL to the array. How would I do this?

Answer 1

1. don't mutate the state
2. you just need url in the state, not the whole container
3. use setState to modify the state
4. consider using spread operator ( ... ) for concatenation
5. I don't see handleChange in your code

    class Container extends React.Component {
      render() {
        return <img src={this.props.url} />;
      }
    }

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          url: "",
          containers: []
        };
      }

      handleChange = e => {
        this.setState({
          url: e.target.value
        });
      };

      handleSubmit = event => {
        event.preventDefault();
        if (this.state.url) {
          this.setState({
            containers: [...this.state.containers, this.state.url],
            url: ""
          });
        }
      };

      render() {
        const { url, containers } = this.state;
        return (
          <div>
            <form onSubmit={this.handleSubmit}>
              <label htmlFor="url">url:</label>
              <input
                type="text"
                name="url"
                value={url}
                onChange={this.handleChange}
              />
              <button>submit</button>
            </form>

            <h2>Containers:</h2>
            <div>
              {!containers.length && <i>no urls added</i>}
              {containers.map((_url, i) => (
                <Container key={i} url={_url} />
              ))}
            </div>
          </div>
        );
      }
    }

    render(<App />, document.getElementById("root"));

Working Example: https://stackblitz.com/edit/react-g72uej