Ggtcf

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 wich 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.

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>
 );