From 0e0cf9ea09ec864dd63c52cf775f862795ef2cf4 Mon Sep 17 00:00:00 2001
From: Rohit Kumar <97377060+rohitKumar38344@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:36:17 +0530
Subject: [PATCH] Fix: Render children in MySelect component to display options
 (#3998)

The original example did not render the **children** prop, which resulted in the **select** element not displaying the options passed as children. This PR updates the **MySelect** component to properly handle the **children** prop and render the options inside the dropdown.

### Changes Made
Updated MySelect component to include the children prop inside the select element.
This ensures that the options passed as children (e.g., <option> tags) are correctly displayed in the dropdown list.

### Issue Addressed
Incorrect example in the documentation where options passed to the MySelect component were not being rendered.

### Testing
Verified that the options now render correctly in the MySelect component by testing it with the provided example from the tutorial.

### Additional Notes
This PR only fixes the example in the docs and does not introduce any breaking changes.
---
 docs/tutorial.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/tutorial.md b/docs/tutorial.md
index 41e91862b..20d38b744 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -849,12 +849,13 @@ const MyCheckbox = ({ children, ...props }) => {
   );
 };
 
-const MySelect = ({ label, ...props }) => {
+const MySelect = ({children, label, ...props }) => {
   const [field, meta] = useField(props);
   return (
     <div>
       <label htmlFor={props.id || props.name}>{label}</label>
       <select {...field} {...props} />
+      {children}
       {meta.touched && meta.error ? (
         <div className="error">{meta.error}</div>
       ) : null}