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

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?