Use component when clicking on jsx button

Question

I’m trying to render the component Feed within that Main in jsx, but I’m not getting it.

Follows the code:

function Feed(props){
    
    return(
        
    <main className='post'>
        <p id='nome'>{props.name}</p>
        <p id='texto'>{props.text}</p>
        <p id='reacoes'>
          <ThumbUpIcon id='like' color='primary'/>
          <ThumbDownAltIcon id='deslike' color='secondary'/>
          <button id='detalhes'>Ver Detalhes</button>
        </p>
    </main>
    )
    
}

export default function Feeds(){
   
const criarPostagem = e => Feed
    
    return(
        <Main>
            
            <div>
                <input 
                type='text' 
                id='postar'/>
                <button onClick={criarPostagem} id='botaoPostar'>postar</button>
            </div>  
                
            <Feed/>
              
        </Main>
    )
}

The Main is just one styled component. I put a Feed in the return only for demonstration in the image, but I want to add a Feed whenever you click the button Postar

Answer 1

There are always these problems about how to create a component within the other and in the current question how to render through the information collections, simple, just create a state of type array and manage this information that automatically within one structure can repeat the other component in a very transparent, example:

function Feed({item:{name, title}}) {
  return (
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{name}</h5>
        <p class="card-text">{title}</p>
      </div>
    </div>
  )
}
function Main() {
  const [items, setItems] = React.useState([]);
  const [name, setName] = React.useState('');
  const [title, setTitle] = React.useState('');
  const nameRef = React.useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    setItems(state => {      
      return [...state, {name, title}]
    });
    setName('');
    setTitle('');
    nameRef.current.focus();
  }
  React.useEffect(() => {
    if (nameRef.current) {
      nameRef.current.focus();
    }
  }, []);
  return (
    <div className="container mt-3 mb-3">
      <div>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label for="name">Nome:</label>
            <input
              ref={nameRef}
              id="name"
              className="form-control form-control-sm"
              value={name} 
              onChange={e => setName(e.target.value)}
            />
          </div> 
          <div className="form-group">
            <label for="title">Titulo:</label>
            <input
              id="title"
              className="form-control form-control-sm"
              value={title} 
              onChange={e => setTitle(e.target.value)}
            />
          </div> 
          <div style={{marginTop:10}}>
          <button
            className="btn btn-success btn-block"
            disabled={name.length===0 || title.length ===0}
          >
            Inserir
          </button>
          </div>
        </form>
      </div>
      <div className="row">        
         {items.map((item, index) => (
          <div className="col-md-3 p-1" key={index}>
            <Feed item={item} />
          </div>
         ))}        
      </div>      
   </div>
  );
}

ReactDOM.render( <Main />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="root">Carregando ...</div>