How to render a react component inside a react component every time a button is clicked?

Question

I am pretty new to React and am working on a Nextjs app. I am having problem with rendering a react component every time a button is clicked - the component just does not show. However when I inspect the page and log the very component, it shows up that it is returned as it should be by the function for this purpose. I am using react hooks - useState and useEffect. What I want to be happening is, every time the button "+" is clicked, a new NeededProductsField component to show up. It is a simple form for adding a recipe from a user. I wonder if somebody could help. Thank you!

import FloatingLabel from 'react-bootstrap/FloatingLabel';
import Button from 'react-bootstrap/Button';

import { useState, useEffect } from 'react';

import NeededProductsField from './NeededProductsField';

function AddRecipeForm() {
    const[newFieldVisible, setNewFieldVisible] = useState(false);

    function generateNewField(stat) {
        if (stat === true) {
            return <NeededProductsField />;
        }
    }

    function showField(state) {
        useEffect(() => {
            if (state === true) {
                console.log("State changed to TRUE? " + newFieldVisible);
                // console.log(generateNewField(newFieldVisible));
                generateNewField(newFieldVisible);
                setNewFieldVisible(false);
            }                
        }, [newFieldVisible]);
    }

    return (
        <Form>
        <Form.Group className="mb-3" controlId="addRecipe">
            <Form.Label>Име на рецептата</Form.Label>
            <Form.Control type="title" placeholder="Добави име" />
        </Form.Group>

        <Form.Group className="mb-3" controlId="neededProducts">
            <Form.Label>Необходими продукти</Form.Label>{' '}
            <Button variant="primary" size="sm" onClick={() => setNewFieldVisible(true)}>+</Button>{' '}
            <p>
            <NeededProductsField />
            </p>
            { showField(newFieldVisible) }
        </Form.Group>
        
        <Button variant="primary" type="submit">
            Запиши
        </Button>
        </Form>
    );
}

export default AddRecipeForm; ```

And this is my NeededProductsField component:

```import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function NeededProductsField(props) {
    return (
        <Row>
            <Col xs={7}>
            <Form.Control placeholder="Име" />
            </Col>
            <Col>
            <Form.Control placeholder="Количество" />
            </Col>
            <Col>
            <Form.Control placeholder="М. ед." />
            </Col>
        </Row>
    );
}

export default NeededProductsField; ```

Answer 1

You probably have a bit of mess-up with your state and useEffect, but you don't need all of that

Just update your component like so:

function AddRecipeForm() {
  const [fieldsNum, setFieldsNum] = useState(1);

  return (
    <Form>
      <Form.Group className="mb-3" controlId="addRecipe">
        <Form.Label>Име на рецептата</Form.Label>
        <Form.Control type="title" placeholder="Добави име" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="neededProducts">
        <Form.Label>Необходими продукти</Form.Label>
        <Button
          variant="primary"
          size="sm"
          onClick={() => setFieldsNum(fieldsNum + 1)}
        >
          +
        </Button>
        <p>
          {[...Array(fieldsNum).keys()].map(_field => (
            <NeededProductsField />
          ))}
        </p>
      </Form.Group>
      <Button variant="primary" type="submit">
        Запиши
      </Button>
    </Form>
  );
}