CODEWITHSUNDEEP
reactjsinputoption-type
Sagar Pokale
Sagar Pokale

Reputation: 1

options tag in react cannot print the value from sever but showing value in console window

const AddPost = () => {
  const [categories, setCategory] = useState([]);

  var catt = categories;

  useEffect(() => {
    loadAllCategories()
      .then((data) => {
        // console.log(data);
        setCategory(data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const [content, setContent] = useState("");

  return (
    <div className="wrapper">
      <Card className="shadow mt-2">
        <CardBody>
          <Form>
            <div className="my-3">
              <Label for="category">Post Category</Label>
              <Input
                id="category"
                type="select"
                className="rounded-3"
                placeholder="Enter Here"
              >
                {/* I have tried this "Value is display on the Console window but not display inside the option tag */}

                {categories.map((cat) => {
                  <option key={cat.categoryId} value={cat.categoryId}>
                    {console.log(cat.categoryTitle)}
                    {console.log(cat.categoryId)}
                    {cat.categoryTitle}
                    {cat.categoryId}
                  </option>;
                  // debugger;
                })}

                {/* Also tried to use forEach loop but same result */}

                {/* {catt.forEach((cat) => {
                  var option = cat.categoryTitle;

                  debugger;
                  <option>
                    {option}
                    {console.log(option)}
                  </option>;
                })} */}
              </Input>
            </div>
            <Container className="text-center">
              <Button color="primary">Create Post</Button>
              <Button className="ms-2" color="danger">
                Reset Content
              </Button>
            </Container>
          </Form>
        </CardBody>
        {content}
      </Card>
    </div>
  );
};

The value are getting from the server and displaying into the console window but not showing inside the option tag in react

Upvotes: 0

Views: 22

Answers (1)

RubenSmn
RubenSmn

Reputation: 4672

You're not returning anything from you map function.

{
  categories.map((cat) => {
    return (
      <option key={cat.categoryId} value={cat.categoryId}>
        {cat.categoryTitle}
        {cat.categoryId}
      </option>
    );
  });
}

Upvotes: 1

Related Questions