Home > front end >  How to select radio buttons separately in a flatlist react-native
How to select radio buttons separately in a flatlist react-native

Time:01-05

I am getting data from an api with questions and questions-options. Every question has 4 options to chose. I have rendered the results in a flatlist. When i select the radio buttons I cant save the value for each question. Take a look at my code :

const Step3 = () => {
  const [questions, setQuestions] = useState([]);
  const [values, setValue] = useState()
  const getQuestions = async () => {
    const locale = 'sq'; // TODO: get current locale
    const response = await apiStandarts.get(`/questions?locale=${locale}`, {
      params: { _limit: MAX_QUESTIONS, active: 1, _sort:'sortId:ASC' },
    });
    setQuestions(response.data);
  };
  
  useEffect(() => {
    getQuestions();
  }, []);

  const OptionList = (groupOption) => {
    return (
      <FlatList
        data={groupOption.options}
        keyExtractor={(result) => result.id.toString()}
        renderItem={({ item, index}) => {
          const clickedRadio = () => {
            setValue(item.id)
          }
          return (
            <View key={index}>
              <Radio label={item.description} onChange={()=> clickedRadio() } />
            </View>
          );
        }}
      />
    );
  };

  return (
    <View style={styles.container}>
      <Text style={{ fontWeight: "bold", fontSize: 16, color: "#6B24AA" }}>
        {t("Choose an option/Scroll for more questions")}
      </Text>
      <FlatList
        data={questions}
        keyExtractor={(result) => result.id.toString()}
        renderItem={({ item, index }) => {
          return (
            <View style={styles.groupOptions} key={index}>
              <Text>{item.description}</Text>
              <OptionList options={item?.question_options}></OptionList>
            </View>
          );
        }}
      />
    </View>

  )
}

Here is the data structure:

[
   {
      "id":11,
      "description":"A ka organizata juaj politika dhe procedura të brendshme organizative si pjesë e të cilave parashikohet qartë mënyra e ngritjes së fondeve dhe e manaxhimit të tyre në mënyrë etike?",
      "active":true,
      "sortId":11,
      "locale":"sq",
      "published_at":"2021-06-10T13:56:39.618Z",
      "created_at":"2021-06-10T13:56:36.456Z",
      "updated_at":"2021-10-06T09:18:29.403Z",
      "organization_evaluation":null,
      "questId":11,
      "question_options":[
         {
            "id":44,
            "question":11,
            "description":"Organizata ka politika dhe procedura të brendshme organizative si pjesë e të cilave parashikohet shumë qartë mënyra e ngritjes së fondeve dhe e manaxhimit të tyre në mënyrë etike.",
            "points":4,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:15:34.685Z",
            "created_at":"2021-06-10T14:15:31.675Z",
            "updated_at":"2021-12-06T09:53:00.315Z",
            "question_option_suggestion":{
               "id":53,
               "question_option":44,
               "description":"Kjo është një praktikë shumë e mirë  për mundësimin e qendrueshmërisë organizative dhe transparencën e llogaridhënien më të gjithë grupet e interesit. Është e rëndësishme që këto procese të mbahen dhe mësimet e nxjerra të ndahen, në mënyrë që organizatat e tjera të mund të ndjekin këtë shembull. ",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:34.873Z",
               "created_at":"2021-11-22T13:55:53.026Z",
               "updated_at":"2021-12-06T09:53:00.317Z"
            },
            "organization_evaluation":null,
            "questOptionId":44,
            "sort":4
         },
         {
            "id":41,
            "question":11,
            "description":"Organizata nuk ka politika dhe procedura të tilla.",
            "points":1,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:13:20.937Z",
            "created_at":"2021-06-10T14:13:17.713Z",
            "updated_at":"2021-12-06T09:51:40.886Z",
            "question_option_suggestion":{
               "id":50,
               "question_option":41,
               "description":"Të paturit e praktikave të qarta dhe të formalizuara për mbledhjen e fondeve dhe përdorimin e menaxhimin etik të tyre, është një praktikë e këshillueshme pasi përbën një mjet për rritjen e qendrueshëmrisë së organizatës, uljen e varësisë nga një burim i caktuar fondesh, dhe krijimin e mundësisë për të qenë novator e i suksesshëm. Gjithashtu këto praktika garantojnë njohjen gjerësisht të burimeve nga të gjitha palët e interesuara. Kjo do të sjellë më shumë transparencë dhe të përmirësojë përgjegjshmërinë.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:22.267Z",
               "created_at":"2021-11-22T13:54:07.049Z",
               "updated_at":"2021-12-06T09:51:40.889Z"
            },
            "organization_evaluation":null,
            "questOptionId":41,
            "sort":1
         },
         {
            "id":42,
            "question":11,
            "description":"Organizata nuk ka politika dhe procedura të tilla por ndjek disa parime të përgjithshme etike në ngritjen e fondeve dhe manaxhimin e tyre.",
            "points":2,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:13:57.687Z",
            "created_at":"2021-06-10T14:13:49.677Z",
            "updated_at":"2021-12-06T09:52:12.383Z",
            "question_option_suggestion":{
               "id":51,
               "question_option":42,
               "description":"Të paturit e praktikave të qarta dhe të formalizuara për mbledhjen e fondeve dhe përdorimin e menaxhimin etik të tyre, është një praktikë e këshillueshme pasi përbën një mjet për rritjen e qendrueshëmrisë së organizatës, uljen e varësisë nga një burim i caktuar fondesh, dhe krijimin e mundësisë për të qenë novator e i  suksesshëm. Gjithashtu këto praktika garantojnë njohjen gjerësisht të burimeve nga të gjitha palët e interesuara. Kjo do të sjellë më shumë transparencë dhe të përmirësojë përgjegjshmërinë.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:26.501Z",
               "created_at":"2021-11-22T13:54:46.944Z",
               "updated_at":"2021-12-06T09:52:12.385Z"
            },
            "organization_evaluation":null,
            "questOptionId":42,
            "sort":2
         },
         {
            "id":43,
            "question":11,
            "description":"Organizata ka politika dhe procedura të brendshme organizative si pjesë e të cilave ka parashikime të përgjithshme mbi mënyrën e ngritjes së fondeve.",
            "points":3,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:14:54.428Z",
            "created_at":"2021-06-10T14:14:51.561Z",
            "updated_at":"2021-12-06T09:52:39.514Z",
            "question_option_suggestion":{
               "id":52,
               "question_option":43,
               "description":"Zhvillimi dhe përditësimi i vazhdueshëm i praktikave të tilla, në varësi dhe të dinamikave zhvillimore të organizatës, siguron një përqasje novatore lidhur me garantimin e qendrueshmërisë së organizatës. Këshillohet që këto politika të jenë të mirë detajuara, duke mundësuar jo vetëm një njohje sa më të gjerë nga të gjithë grupet e interesit në kuadër të transparencës dhe llogaridhënies, por dhe zbatim të saktë të tyre në të gjithë nivelet hirarkike.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:31.381Z",
               "created_at":"2021-11-22T13:55:27.990Z",
               "updated_at":"2021-12-06T09:52:39.518Z"
            },
            "organization_evaluation":null,
            "questOptionId":43,
            "sort":3
         }
      ],
      "commitments":[
         {
            "id":5,
            "name":"Financim, Ngritje Fondesh dhe Manaxhim i Burimeve",
            "icon":"fa-pencil",
            "primary_color":"#348D73",
            "secondary_color":"#06C088",
            "active":true,
            "published_at":"2021-05-13T08:09:20.077Z",
            "created_at":"2021-05-13T08:09:11.107Z",
            "updated_at":"2021-07-26T10:25:26.204Z",
            "icon_color":"#33D0A1",
            "locale":"sq",
            "commitments_icon":5,
            "commitment_icon":5,
            "color_palette":"light_blue",
            "link":"/financing",
            "sortId":3
         }
      ]
   },
   {
      "id":13,
      "description":"A kryen organizata juaj vlerësime periodike të performancës të punonjësve dhe si? ",
      "active":true,
      "sortId":13,
      "locale":"sq",
      "published_at":"2021-06-10T13:57:37.862Z",
      "created_at":"2021-06-10T13:57:34.723Z",
      "updated_at":"2021-10-06T09:18:57.834Z",
      "organization_evaluation":null,
      "questId":13,
      "question_options":[
         {
            "id":51,
            "question":13,
            "description":"Vlerësimi i performancës së punonjësve bëhet periodikisht me afate të përcaktuara, , përmes një procedure të formalizuar,  por vetëm nga drejtuesi i organizatës.",
            "points":3,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:20:35.874Z",
            "created_at":"2021-06-10T14:19:48.983Z",
            "updated_at":"2021-12-06T09:55:01.718Z",
            "question_option_suggestion":{
               "id":60,
               "question_option":51,
               "description":"Kjo është një praktikë e mirë organizative e cila mund të përmirësohet më tej me përfshirjen në procedurë jo vetëm të drejtuesit të organizatës por dhe niveleve të tjera të hierarkisë. Kjo përfshirje ofron një këndvështrim më të gjerë të vlerësimit të përformancës në raport dhe me pjesën tjetër të stafit kryesisht supervizues. ",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:21:05.079Z",
               "created_at":"2021-11-22T14:02:42.810Z",
               "updated_at":"2021-12-06T09:55:01.724Z"
            },
            "organization_evaluation":null,
            "questOptionId":51,
            "sort":3
         },
         {
            "id":49,
            "question":13,
            "description":"Organizata jonë nuk kryen vlerësime periodike të  performancës së punonjësve.",
            "points":1,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:19:03.812Z",
            "created_at":"2021-06-10T14:18:56.048Z",
            "updated_at":"2021-12-06T09:54:26.197Z",
            "question_option_suggestion":{
               "id":58,
               "question_option":49,
               "description":"Vlerësimi i performancës së burimeve njerëzore është një aspekt shumë i rëndësishëm për të analizuar ecurinë e organizatës, rregullimet e mundshme që mund të nevojiten, si dhe për të mbledhur komente dhe sugjerime nga stafi dhe vullnetarët e organizatës. Kryerja e një praktike të tillë është shumë e këshillueshme të zhvillohet.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:55.365Z",
               "created_at":"2021-11-22T13:59:19.528Z",
               "updated_at":"2021-12-06T09:54:26.199Z"
            },
            "organization_evaluation":null,
            "questOptionId":49,
            "sort":1
         },
         {
            "id":50,
            "question":13,
            "description":"Organizata jonë kryen vlerësime periodike të performancës të punonjësve por jo sipas një planifikimi dhe procedure të formalizuar.",
            "points":2,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:19:36.859Z",
            "created_at":"2021-06-10T14:19:30.174Z",
            "updated_at":"2021-12-06T09:54:43.753Z",
            "question_option_suggestion":{
               "id":59,
               "question_option":50,
               "description":"Vlerësimi i performancës së burimeve njerëzore është një aspekt shumë i rëndësishëm për të analizuar ecurinë e organizatës, rregullimet e mundshme që mund të nevojiten, si dhe për të mbledhur komente dhe sugjerime nga stafi dhe vullnetarët e organizatës. Kryerja e një praktike të tillë është shumë e këshillueshme të zhvillohet, sipas një procedure të formalizuar në mënyrë periodike.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:59.427Z",
               "created_at":"2021-11-22T13:59:50.511Z",
               "updated_at":"2021-12-06T09:54:43.755Z"
            },
            "organization_evaluation":null,
            "questOptionId":50,
            "sort":2
         },
         {
            "id":52,
            "question":13,
            "description":"Vlerësimi i performancës së punonjësve bëhet periodikisht me afate të përcaktuara, , përmes një procedure të formalizuar me përfshirjen dhe vlerësimin e punonjësit dhe të gjitha niveleve hirearkike.",
            "points":4,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:20:57.838Z",
            "created_at":"2021-06-10T14:20:54.741Z",
            "updated_at":"2021-12-06T09:55:18.506Z",
            "question_option_suggestion":{
               "id":61,
               "question_option":52,
               "description":"Vlerësimi periodik i performancës së punonjësve, nëpërmjet një procedure të formalizuar dhe me përfshirjen e të gjitha niveleve hierarkike, është një praktikë e mirë institucionale. Është e rëndësishme që këto praktika të zhvillohen më tej dhe mësimet e nxjerra gjatë ngritjes së tyre të ndahen, kështu që organizatat e tjera mund të ndjekin këtë shembull.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:21:08.716Z",
               "created_at":"2021-11-22T14:03:21.740Z",
               "updated_at":"2021-12-06T09:55:18.508Z"
            },
            "organization_evaluation":null,
            "questOptionId":52,
            "sort":4
         }
      ],
      "commitments":[
         {
            "id":6,
            "name":"Burime Njerëzore të Mirë Menaxhuara",
            "icon":"fa-pencil",
            "primary_color":"#03BEE7",
            "secondary_color":"#428D9D",
            "active":true,
            "published_at":"2021-05-13T08:10:12.178Z",
            "created_at":"2021-05-13T08:10:08.282Z",
            "updated_at":"2021-07-26T10:25:12.028Z",
            "icon_color":"#027A95",
            "locale":"sq",
            "commitments_icon":6,
            "commitment_icon":6,
            "color_palette":"dark_blue",
            "link":"/managed-human-resources",
            "sortId":7
         }
      ]
   }
]

This is the json format for the data

CodePudding user response:

Assume that server return this response :


[
   {
      "id":11,
      "description":"A ka organizata juaj politika dhe procedura të brendshme organizative si pjesë e të cilave parashikohet qartë mënyra e ngritjes së fondeve dhe e manaxhimit të tyre në mënyrë etike?",
      "active":true,
      "sortId":11,
      "locale":"sq",
      "published_at":"2021-06-10T13:56:39.618Z",
      "created_at":"2021-06-10T13:56:36.456Z",
      "updated_at":"2021-10-06T09:18:29.403Z",
      "organization_evaluation":null,
      "questId":11,
      "question_options":[
         {
            "id":44,
            "question":11,
            "description":"Organizata ka politika dhe procedura të brendshme organizative si pjesë e të cilave parashikohet shumë qartë mënyra e ngritjes së fondeve dhe e manaxhimit të tyre në mënyrë etike.",
            "points":4,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:15:34.685Z",
            "created_at":"2021-06-10T14:15:31.675Z",
            "updated_at":"2021-12-06T09:53:00.315Z",
            "question_option_suggestion":{
               "id":53,
               "question_option":44,
               "description":"Kjo është një praktikë shumë e mirë  për mundësimin e qendrueshmërisë organizative dhe transparencën e llogaridhënien më të gjithë grupet e interesit. Është e rëndësishme që këto procese të mbahen dhe mësimet e nxjerra të ndahen, në mënyrë që organizatat e tjera të mund të ndjekin këtë shembull. ",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:34.873Z",
               "created_at":"2021-11-22T13:55:53.026Z",
               "updated_at":"2021-12-06T09:53:00.317Z"
            },
            "organization_evaluation":null,
            "questOptionId":44,
            "sort":4
         },
         {
            "id":41,
            "question":11,
            "description":"Organizata nuk ka politika dhe procedura të tilla.",
            "points":1,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:13:20.937Z",
            "created_at":"2021-06-10T14:13:17.713Z",
            "updated_at":"2021-12-06T09:51:40.886Z",
            "question_option_suggestion":{
               "id":50,
               "question_option":41,
               "description":"Të paturit e praktikave të qarta dhe të formalizuara për mbledhjen e fondeve dhe përdorimin e menaxhimin etik të tyre, është një praktikë e këshillueshme pasi përbën një mjet për rritjen e qendrueshëmrisë së organizatës, uljen e varësisë nga një burim i caktuar fondesh, dhe krijimin e mundësisë për të qenë novator e i suksesshëm. Gjithashtu këto praktika garantojnë njohjen gjerësisht të burimeve nga të gjitha palët e interesuara. Kjo do të sjellë më shumë transparencë dhe të përmirësojë përgjegjshmërinë.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:22.267Z",
               "created_at":"2021-11-22T13:54:07.049Z",
               "updated_at":"2021-12-06T09:51:40.889Z"
            },
            "organization_evaluation":null,
            "questOptionId":41,
            "sort":1
         },
         {
            "id":42,
            "question":11,
            "description":"Organizata nuk ka politika dhe procedura të tilla por ndjek disa parime të përgjithshme etike në ngritjen e fondeve dhe manaxhimin e tyre.",
            "points":2,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:13:57.687Z",
            "created_at":"2021-06-10T14:13:49.677Z",
            "updated_at":"2021-12-06T09:52:12.383Z",
            "question_option_suggestion":{
               "id":51,
               "question_option":42,
               "description":"Të paturit e praktikave të qarta dhe të formalizuara për mbledhjen e fondeve dhe përdorimin e menaxhimin etik të tyre, është një praktikë e këshillueshme pasi përbën një mjet për rritjen e qendrueshëmrisë së organizatës, uljen e varësisë nga një burim i caktuar fondesh, dhe krijimin e mundësisë për të qenë novator e i  suksesshëm. Gjithashtu këto praktika garantojnë njohjen gjerësisht të burimeve nga të gjitha palët e interesuara. Kjo do të sjellë më shumë transparencë dhe të përmirësojë përgjegjshmërinë.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:26.501Z",
               "created_at":"2021-11-22T13:54:46.944Z",
               "updated_at":"2021-12-06T09:52:12.385Z"
            },
            "organization_evaluation":null,
            "questOptionId":42,
            "sort":2
         },
         {
            "id":43,
            "question":11,
            "description":"Organizata ka politika dhe procedura të brendshme organizative si pjesë e të cilave ka parashikime të përgjithshme mbi mënyrën e ngritjes së fondeve.",
            "points":3,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:14:54.428Z",
            "created_at":"2021-06-10T14:14:51.561Z",
            "updated_at":"2021-12-06T09:52:39.514Z",
            "question_option_suggestion":{
               "id":52,
               "question_option":43,
               "description":"Zhvillimi dhe përditësimi i vazhdueshëm i praktikave të tilla, në varësi dhe të dinamikave zhvillimore të organizatës, siguron një përqasje novatore lidhur me garantimin e qendrueshmërisë së organizatës. Këshillohet që këto politika të jenë të mirë detajuara, duke mundësuar jo vetëm një njohje sa më të gjerë nga të gjithë grupet e interesit në kuadër të transparencës dhe llogaridhënies, por dhe zbatim të saktë të tyre në të gjithë nivelet hirarkike.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:31.381Z",
               "created_at":"2021-11-22T13:55:27.990Z",
               "updated_at":"2021-12-06T09:52:39.518Z"
            },
            "organization_evaluation":null,
            "questOptionId":43,
            "sort":3
         }
      ],
      "commitments":[
         {
            "id":5,
            "name":"Financim, Ngritje Fondesh dhe Manaxhim i Burimeve",
            "icon":"fa-pencil",
            "primary_color":"#348D73",
            "secondary_color":"#06C088",
            "active":true,
            "published_at":"2021-05-13T08:09:20.077Z",
            "created_at":"2021-05-13T08:09:11.107Z",
            "updated_at":"2021-07-26T10:25:26.204Z",
            "icon_color":"#33D0A1",
            "locale":"sq",
            "commitments_icon":5,
            "commitment_icon":5,
            "color_palette":"light_blue",
            "link":"/financing",
            "sortId":3
         }
      ]
   },
   {
      "id":13,
      "description":"A kryen organizata juaj vlerësime periodike të performancës të punonjësve dhe si? ",
      "active":true,
      "sortId":13,
      "locale":"sq",
      "published_at":"2021-06-10T13:57:37.862Z",
      "created_at":"2021-06-10T13:57:34.723Z",
      "updated_at":"2021-10-06T09:18:57.834Z",
      "organization_evaluation":null,
      "questId":13,
      "question_options":[
         {
            "id":51,
            "question":13,
            "description":"Vlerësimi i performancës së punonjësve bëhet periodikisht me afate të përcaktuara, , përmes një procedure të formalizuar,  por vetëm nga drejtuesi i organizatës.",
            "points":3,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:20:35.874Z",
            "created_at":"2021-06-10T14:19:48.983Z",
            "updated_at":"2021-12-06T09:55:01.718Z",
            "question_option_suggestion":{
               "id":60,
               "question_option":51,
               "description":"Kjo është një praktikë e mirë organizative e cila mund të përmirësohet më tej me përfshirjen në procedurë jo vetëm të drejtuesit të organizatës por dhe niveleve të tjera të hierarkisë. Kjo përfshirje ofron një këndvështrim më të gjerë të vlerësimit të përformancës në raport dhe me pjesën tjetër të stafit kryesisht supervizues. ",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:21:05.079Z",
               "created_at":"2021-11-22T14:02:42.810Z",
               "updated_at":"2021-12-06T09:55:01.724Z"
            },
            "organization_evaluation":null,
            "questOptionId":51,
            "sort":3
         },
         {
            "id":49,
            "question":13,
            "description":"Organizata jonë nuk kryen vlerësime periodike të  performancës së punonjësve.",
            "points":1,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:19:03.812Z",
            "created_at":"2021-06-10T14:18:56.048Z",
            "updated_at":"2021-12-06T09:54:26.197Z",
            "question_option_suggestion":{
               "id":58,
               "question_option":49,
               "description":"Vlerësimi i performancës së burimeve njerëzore është një aspekt shumë i rëndësishëm për të analizuar ecurinë e organizatës, rregullimet e mundshme që mund të nevojiten, si dhe për të mbledhur komente dhe sugjerime nga stafi dhe vullnetarët e organizatës. Kryerja e një praktike të tillë është shumë e këshillueshme të zhvillohet.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:55.365Z",
               "created_at":"2021-11-22T13:59:19.528Z",
               "updated_at":"2021-12-06T09:54:26.199Z"
            },
            "organization_evaluation":null,
            "questOptionId":49,
            "sort":1
         },
         {
            "id":50,
            "question":13,
            "description":"Organizata jonë kryen vlerësime periodike të performancës të punonjësve por jo sipas një planifikimi dhe procedure të formalizuar.",
            "points":2,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:19:36.859Z",
            "created_at":"2021-06-10T14:19:30.174Z",
            "updated_at":"2021-12-06T09:54:43.753Z",
            "question_option_suggestion":{
               "id":59,
               "question_option":50,
               "description":"Vlerësimi i performancës së burimeve njerëzore është një aspekt shumë i rëndësishëm për të analizuar ecurinë e organizatës, rregullimet e mundshme që mund të nevojiten, si dhe për të mbledhur komente dhe sugjerime nga stafi dhe vullnetarët e organizatës. Kryerja e një praktike të tillë është shumë e këshillueshme të zhvillohet, sipas një procedure të formalizuar në mënyrë periodike.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:59.427Z",
               "created_at":"2021-11-22T13:59:50.511Z",
               "updated_at":"2021-12-06T09:54:43.755Z"
            },
            "organization_evaluation":null,
            "questOptionId":50,
            "sort":2
         },
         {
            "id":52,
            "question":13,
            "description":"Vlerësimi i performancës së punonjësve bëhet periodikisht me afate të përcaktuara, , përmes një procedure të formalizuar me përfshirjen dhe vlerësimin e punonjësit dhe të gjitha niveleve hirearkike.",
            "points":4,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:20:57.838Z",
            "created_at":"2021-06-10T14:20:54.741Z",
            "updated_at":"2021-12-06T09:55:18.506Z",
            "question_option_suggestion":{
               "id":61,
               "question_option":52,
               "description":"Vlerësimi periodik i performancës së punonjësve, nëpërmjet një procedure të formalizuar dhe me përfshirjen e të gjitha niveleve hierarkike, është një praktikë e mirë institucionale. Është e rëndësishme që këto praktika të zhvillohen më tej dhe mësimet e nxjerra gjatë ngritjes së tyre të ndahen, kështu që organizatat e tjera mund të ndjekin këtë shembull.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:21:08.716Z",
               "created_at":"2021-11-22T14:03:21.740Z",
               "updated_at":"2021-12-06T09:55:18.508Z"
            },
            "organization_evaluation":null,
            "questOptionId":52,
            "sort":4
         }
      ],
      "commitments":[
         {
            "id":6,
            "name":"Burime Njerëzore të Mirë Menaxhuara",
            "icon":"fa-pencil",
            "primary_color":"#03BEE7",
            "secondary_color":"#428D9D",
            "active":true,
            "published_at":"2021-05-13T08:10:12.178Z",
            "created_at":"2021-05-13T08:10:08.282Z",
            "updated_at":"2021-07-26T10:25:12.028Z",
            "icon_color":"#027A95",
            "locale":"sq",
            "commitments_icon":6,
            "commitment_icon":6,
            "color_palette":"dark_blue",
            "link":"/managed-human-resources",
            "sortId":7
         }
      ]
   }
]

We need to build new array of selected options corresponding to the question.


import React, {useState} from 'react'
import {View,FlatList,StyleSheet,Text} from 'react-native'
import {RadioButton} from "react-native-paper"
const  has = require('lodash.has');
import response from './response'

const styles = StyleSheet.create({})



const  Step3 = () => {
  const [questions, setQuestions] = useState(response);

  const [answers,setAnswers] = useState({})
  const [values, setValue] = useState()


 const isOptionSelected = (option)=>{

   const answer = answers[option.question]

  if(answer){
   return   option.id == answer.id
  }

return false
 }

  const OptionList = (groupOption) => {
    return (
      <FlatList
        data={groupOption.options}
        keyExtractor={(result) => result.id.toString()}
        renderItem={({ item, index}) => {

       
          const clickedRadio = () => {
      
         const selectedOption = {[item.question]:{...item}}
            setAnswers({...answers,...selectedOption})


            console.log({answers})


            
          }

          

 const status = isOptionSelected(item)? 'checked' : 'unchecked'
          return (
            <View key={index}>
              <RadioButton status={status}   onPress={clickedRadio} label={item.description} onChange={()=> clickedRadio() } />
            </View>
          );
        }}
      />
    );
  };

  return (
    <View style={styles.container}>
      <Text style={{ fontWeight: "bold", fontSize: 16, color: "#6B24AA" }}>
        Choose an option/Scroll for more questions
      </Text>
      <FlatList
        data={questions}
        keyExtractor={(result) => result.id.toString()}
        renderItem={({ item, index }) => {
          return (
            <View style={styles.groupOptions} key={index}>
              <Text>{item.description}</Text>
              <OptionList options={item?.question_options}></OptionList>
            </View>
          );
        }}
      />
    </View>

  )
}


export default Step3


For sake of simplicity, I removed logic to fetch data from the server.

Check working example here

https://snack.expo.dev/@emmbyiringiro/1376bf

CodePudding user response:

You need to have selected value for each options group, this can be achieved by using an Object in the initial value state:

const [values, setValue] = useState({}) then update OptionsList props to accept two more props, onSelect and isSelected.

<OptionList options={item?.question_options} selectedId={value[item?.id]} onSelect={(optionId)=>{ setValue(prevValues=>({...prevValues, [item?.id]:optionId})) }}/>

in OptionList component, you will need to add a specific style for active options using selectedId from props item.id===selectedId, and on select you will call the onSelect prop with the option Id as a parameter.

  •  Tags:  
  • Related