How to dynamically render the user data in a component on button click in React

I'm new in React and got stuck on how can I achieve this.

After the user fills the field CEP from the first card and click on the button 'Gravar Dados', it shows a second card with all the information from the first card.

Template Picture:

New Result Picture:

What I need is dynamically create another card, under the second card with new info from the first card.

This is what I've done so far.

I have this component DadosPessoais.js which is the second card in the Template Picture:

render() {
    return (
        <div className="card shadow mt-5" >
            <div className="card-header">
                <span>Dados Pessoais </span>
            </div>
            <div className="card-body">

                <div className="row">

                    <div className="col-4">

                        <div>
                            <span>Cep: <strong>{this.props.cep}</strong></span>
                        </div>
                        <div>
                            <span>Bairro: <strong>{this.props.bairro}</strong></span>
                        </div>

                    </div>

                    <div className="col-5">

                        <div>
                            <span>Rua: <strong>{this.props.rua}</strong></span>
                        </div>
                        <div>
                            <span>Cidade: <strong>{this.props.cidade}</strong></span>
                        </div>

                    </div>

                    <div className="col-3">

                        <div>
                            <span>UF: <strong>{this.props.uf}</strong></span>
                        </div>

                    </div>

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

In my Home.js I have a form with onSubmit that calls mostrarDadosPessoais function:

Function:

      mostrarDadosPessoais(e) {
    e.preventDefault();

    this.setState({
      listaDados: this.state.listaDados.concat({
        cep: e.target.value,
        rua: e.target.value,
        bairro: e.target.value,
        cidade: e.target.value,
        uf: e.target.value,
      }),
    });
  }

And my input components UserInput, Should it be like this?:

            <div className="col-3">
              <UserInput name="Rua" Label="Rua" Id="Rua" value={this.state.rua} Disabled />
            </div>

            <div className="col-3">
              <UserInput name="Bairro" Label="Bairro" Id="Bairro" value={this.state.bairro} Disabled />
            </div>

            <div className="col-3">
              <UserInput name="Cidade" Label="Cidade" Id="Cidade" value={this.state.cidade} Disabled />
            </div>

            <div className="col-1">
              <UserInput name="UF" Label="UF" Id="UF" value={this.state.uf} Disabled />
            </div>

And to show the result card I've done this:

<div className="col-md-4">
        {this.state.listaDados.length === 0
          ? null
          : this.state.listaDados.map((lista) => (<DadosPessoais {...lista} />))}
      </div>

This is my state:

this.state = {

  listaCidade: [],

  listaDados: [],
}

Any ideas on how can I create another component and keep the values from the first one?

Thank you.

Solution

If I understand well, you need a list of elements, displayed on the right, that will show user-entered data. You need the user to be able to enter many addresses through the form on the left, and you want each address to display on the right.

I would solve this with a component that contains state for all the elements you need to display in an array that you update on a form submit event, because that's an easy event to work with when you have forms with lots of fields. You can grab the values of the components through the event object e.

class StateContainer extends Component {
   constructor() {
      super(props);
      this.state = {
         addresses: [],
      }
   }

   mostrarDadosPessoais(e) {
      e.preventDefault();
      this.setState({
         listaDados: this.state.listaDados.concat({ 
            cep: e.target.cep.value,
            rua: e.target.rua.value,
            // etc, etc
         }),
      })
   }
   render() {
      return (
      <div>
         <form handleSubmit={this.mostrarDadosPessoais}>
            {/* left-side form */}
            <input name="msg" />
            <button type="submit"></button>
         </form>
         <div>
            {/* right-side list of elements */}
            {this.state.addresses.length === 0 
               ? null 
               : this.state.addresses.map(
                  (address) => (<DadosPessoais {...address} />)
                 )
             }
         </div>
      </div>
      );
   }
}